LMDMChatChannels

LMDMChatChannels renders the DM Channel List. It is internally used under LMChannelList and will be used if currentTheme is passed as NETWORKING_CHAT. It accepts an optional prop currentChatroomId which maps for currently opned chatroom.

Props

Property	Type	Description	Optional
currentChatroomId	number	The ID of the currently selected chatroom.	✔️

CSS Classnames

Classname	Description
lm-channel-list dm-channel-list create-new-dm	Container or element for lm channel list dm channel list create new dm
lm-channel-list-header	Container or element for lm channel list header
lm-cursor-pointer	Container or element for lm cursor pointer
lm-channel-list-body	Container or element for lm channel list body
lm-channel-list dm-channel-list	Container or element for lm channel list dm channel list
lm-chat-create-new-dm-conversation	Container or element for lm chat create new dm conversation
title	Container or element for title

Example

To customise the component with their classnames, Open your base css file and override the styles using the classname

.title {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

In a scenario where you would like to change the behaviour or other view related customisation, you can do so by passing you own custom view for LMDMChatChannels. This will offer you the flexibility to customise the behaviour or other logic according to your needs. You can use the below hooks and contexts to customise the component.

Hooks Used

• useDMChannelLists

Contexts Used

• LMUserProviderContext.md

Below is an example for customising the view for LMDMChatChannels and rendering your own view.

• Step 1: Create your own custom view using the hooks and contexts made available by LikeMinds.

import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
  useChannelList
} from "@likeminds.community/likeminds-chat-reactjs";


// Custom Component for GroupChatChannelList
const DMChannelList = ()=>{
  const {dmChatrooms} = useChatroomList()
  return (
    // Your Custom view code for customising the view
    {
      dmChatrooms.map((chatroom)=>{
        return (
          // Your custom code for rendering th chatoom view
        )
      })
    }
  )
}

• Step 2: Pass your Custom View to LMClientOverlayProvider

import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
  useDMChannelLists
} from "@likeminds.community/likeminds-chat-reactjs";

const App = () => {
  const lmChatClient = initiateLMClient();
  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
      customComponents={{
        dmChannelList: <DMChannelList/>
      }}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
};
export default App;

Reference

For reference checkout this file