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	Main container for DM channels
lm-channel-list-header	Header section of channel list
lm-cursor-pointer	Element with pointer cursor
lm-channel-list-body	Main content area of channel list
lm-channel-list dm-channel-list	List of DM channels
lm-chat-create-new-dm-conversation	Button to create new DM conversation
title	Title text element

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,
  useDmChannelLists
} from "@likeminds.community/likeminds-chat-reactjs";


// Custom Component for GroupChatChannelList
const DMChannelList = ()=>{
  const {dmChatrooms} = useDmChannelLists()
  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