LMMessageList

LMMessageList renders the message-list. It renders multiple LMMessage UI each mapped to its correcponding conversation object.

Props

Property	Type	Description	Optional
messageCustomActions	MessageCustomActions	Custom actions for messages in the list.	✔️

CSS Classnames

Classname	Description
lm-channel	Channel container
lm-media-render-portal	Media render container
lm-channel-header topicHeader	Channel header styling
lm-header-left	Left section of header
lm-channel-img	Channel image styling
lm-channel-desc	Channel description text
lm-channel-title	Channel title text
lm-channel-participants lm-chatroom-topic	Participants list container
initiate-dm-request-message	DM request message styling
searched-conversation	Search result styling

Example

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

.lm-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 LMMessageList. This will offer you the flexibility to customise the behaviour or other logic according to your needs. By default we use hooks like useConversations to get the message list and use it internally to display data. You can take a look at the reference file below to know more. Also you can checkout the Hooks and Contexts sections to know the information returned by them.

Below is an example for customising the view for LMMessageList. It is fairly a 2 simple step process

• First you create your own custom component using the hooks and contexts made available by LikeMinds. The will be responsible for fetching data, you might want to process. For example you can get conversations list by using the hook useConversations.

• Then you just have to pass it as a prop to LMClientOverlayProvider.

• Step 1: Create your own custom view.

import {
  useConversations
} from "@likeminds.community/likeminds-chat-reactjs";
const CustomMessageList = () => {
     const {
      conversations,
    } = useConversations();
  return (
    // Your Custom Code
    conversations.map(conversation=>{
      return (
        // Your views for each conversation
      )
    })
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

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

// Custom Component for MessageList
const CustomMessageList = () => {
     const {
      conversations,
    } = useConversations();
  return (
    // Your Custom Code
    conversations.map(conversation=>{
      return (
        // Your views for each conversation
      )
    })
  );
};

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

Reference

For reference checkout this file