LMParticipantList

LMChatAllMembersScreen renders the participant list of the current chatroom. It accepts the following set of props.

Props

Property	Type	Description	Optional
chatroomId	number	The ID of the chatroom.

CSS Classnames

Classname	Description
lm-participant-wrapper	Main container for participant list
lm-participant-header	Header section of participant list
heading	Title text element
back-icon	Back navigation button
counts	Participant count display
member-search	Search input for participants
lm-participant-body	Main content area for list
lm-participant-card	Individual participant card
lm-participant-card-user	User info in participant card
lm-participant-card-detail	Details section of card
name	Participant name display
desc	Participant description text

Example

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

.lm-participant-header {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Hooks Used

• useParticipants

Contexts Used

• LMGlobalClientProviderContext.md

For changes that are not possible via CSS changes, you can also pass along you custom component for LMParticipantList. You can get the details of the chatroom participants by using the hook useParticipants. You can take a look at the reference file, to know all the hooks and contexts used.

Below is an example of how you can create your Custom View for LMHeader It's a simple 2 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 chatroom participants by using the hook useParticipants.

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

• Step 1: Create your own custom view.

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

// Custom Component for ParticipantList
const CustomParticipantsScreen = ({
    chatroomId
}) => {
    const {
    participantsList,
  } = useParticipants(chatroomId);
  return (
    // Your Custom Code for rendering the participant list
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

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

// Custom Component for Participant List
const CustomParticipantsScreen = ({
    chatroomId
}) => {
    const {
    participantsList,
  } = useParticipants(chatroomId);
  return (
    // Your Custom Code for rendering the participant list
  );
};

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

Reference

For reference checkout this file