LMChatChatroom

LMChatroom is a HOC which renders the chatroom. It accepts a prop currentChatroomId, which is internally used to render that chatroom.

Props

Property	Type	Description	Optional
currentChatroomId	number	ID of the currently selected chatroom.	✔️

CSS Classnames

Classname	Description
noChatRoom	Container or element for noChatRoom

Example

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

.noChatRoom {
  background-color: "red";
}

Advanced Customisation

You can also pass your custom component to replace the default view for Empty chatroom Screen. This will just be a static screen. You can use the below hooks and contexts to customise the component.

Hooks Used

• useChatroom

Contexts Used

• LMChatroomContext.md
• LMGlobalClientProviderContext.md

Below is an example for customising the view for Empty Chatroom and rendering your own view.

• Step 1: Create your own custom view.

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


// Custom Component for GroupChatChannelList
const CustomEmptyChatroom = () => {
  return (
    // Your Custom Code for rendering an empty chatroom. You can use an Image to make it look good
  );
};

• Step 2: Pass your Created Custom View to LMClientOverlayProvider

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

// Custom Component for EmptyChatroom
const CustomEmptyChatroom = () => {
  return (
    // Your Custom Code
  );
};

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

Reference

For reference checkout this file