LMGroupChatChannelList

LMGroupChatChannelList renders the group-chat channel list for LikeMinds Chat SDK. It is rendered when currentTheme is passed as COMMUNITY_CHAT, and is internally used under LMChannelList.

Props

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

CSS Classnames

Classname	Description
lm-chat-conversation-preview-icon	Container or element for lm chat conversation preview icon
lm-channel-list-header	Container or element for lm channel list header
title	Container or element for title
icon lm-cursor-pointer	Container or element for icon lm cursor pointer
lm-cursor-pointer	Container or element for lm cursor pointer
lm-channel-list	Container or element for lm channel list
lm-channel-list-body	Container or element for lm channel list body
channel-icon	Container or element for channel icon
channel-desc	Container or element for channel desc
channel-title	Container or element for channel title
time	Container or element for time
channel-info	Container or element for channel info
channel-last-conversation	Container or element for channel last conversation
channel-unseen-convo-count	Container or element for channel unseen convo count
channel-media	Container or element for channel media
exploreTextTitle	Container or element for exploreTextTitle
channel-counts	Container or element for channel counts
ellipse	Container or element for ellipse
exploreTextMsg	Container or element for exploreTextMsg
lm-chat-explore-chat-button	Container or element for lm chat explore chat button
explore-button lm-cursor-pointer	Container or element for explore button lm cursor pointer
lm-chat-icon-explore-chats	Container or element for lm chat icon explore chats
lm-chat-explore-chat-button	Container or element for lm chat explore chat button
explore-button lm-cursor-pointer	Container or element for explore button lm cursor pointer

Example

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

.channel-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 LMGroupChatChannelList. 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

• useChatroomLists

Contexts Used

• LMUserProviderContext.md

Below is an example for customising the view for LMMGroupChatChannelList 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 CustomGroupChatList = ()=>{

  const {groupChatroomList} = useChatroomList()

  return (
    // Your Custom view code for customising the view
    {
      groupChatroomList.map((chatroom)=>{
        return (
          // Your custom code for rendering th chatoom view
        )
      })
    }
  )
}

• Step 2: Pass your Custom View to LMClientOverlayProvider

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

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

Reference

For reference checkout this file