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	Container or element for lm participant wrapper
lm-participant-header	Container or element for lm participant header
heading	Container or element for heading
back-icon	Container or element for back icon
counts	Container or element for counts
member-search	Container or element for member search
lm-participant-body	Container or element for lm participant body
lm-participant-card	Container or element for lm participant card
lm-participant-card-user	Container or element for lm participant card user
lm-participant-card-detail	Container or element for lm participant card detail
name	Container or element for name
desc	Container or element for desc

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