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	Container or element for lm channel
lm-media-render-portal	Container or element for lm media render portal
lm-channel-header topicHeader	Container or element for lm channel header topicHeader
lm-header-left	Container or element for lm header left
lm-channel-img	Container or element for lm channel img
lm-channel-desc	Container or element for lm channel desc
lm-channel-title	Container or element for lm channel title
lm-channel-participants lm-chatroom-topic	Container or element for lm channel participants lm chatroom topic
initiate-dm-request-message	Container or element for initiate dm request message
searched-conversation	Container or element for searched conversation

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