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	Chat conversation preview icon styling
lm-channel-list-header	Header section of channel list
title	Title text styling
icon lm-cursor-pointer	Clickable icon styling
lm-cursor-pointer	Clickable element styling
lm-channel-list	Main channel list container
lm-channel-list-body	Body section of channel list
channel-icon	Channel icon styling
channel-desc	Channel description text
channel-title	Channel title text
time	Timestamp display
channel-info	Channel information section
channel-last-conversation	Last conversation preview
channel-unseen-convo-count	Unread message counter
channel-media	Media preview in channel
exploreTextTitle	Explore section title
channel-counts	Channel count indicators
ellipse	Ellipsis overflow styling
exploreTextMsg	Explore section message
lm-chat-explore-chat-button	Explore chat button styling
explore-button lm-cursor-pointer	Clickable explore button
lm-chat-icon-explore-chats	Explore chats icon
lm-chat-explore-chat-button	Explore chat button container
explore-button lm-cursor-pointer	Clickable explore button container

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,
  useChatroomList
} 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