LMHeader

LMHeader renders a header component of the currently opened chatroom. It is internally used under LMChatroom and displays details of current chatroom and chatroom menu options. It accepts the following props.

Props

Property	Type	Description	Optional
chatroomMenuCustomActions	ChatroomMenuCustomActions	Custom actions for the chatroom menu.	✔️

CSS Classnames

Classname	Description
lm-channel-header	Channel header container
lm-header-left	Left section of header
back-icon header-back-icon	Back button styling
lm-channel-img	Channel image styling
lm-channel-desc	Channel description text
lm-channel-title	Channel title text
lm-channel-participants	Participants list container
lm-header-right	Right section of header
lm-channel-icon	Channel icon styling
lm-chatroom-menu-item	Chatroom menu item 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 LMHeader. This will offer you the flexibility to customise the behaviour or other logic according to your needs. You can use the below hooks and contexts to customise the component.

Hooks Used

• useChatroomMenuOptions

Contexts Used

• LMChatroomContext.md
• LMGlobalClientProviderContext.md
• LMUserProviderContext.md

Below is an example of how you can create your Custom View for LMHeader

• Step 1: Create your own custom view using the hooks and contexts made available by LikeMinds.

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

// Custom Component for Header
const CustomHeader = ({
  chatroomMenuCustomActions,
}) => {
  const { chatroomDetails } = useContext(LMChatroomContext);
  const { currentUser } = useContext(UserProviderContext);
  const { onMute, onLeaveChatroom, onViewParticipants, onBlock, onUnBlock } =
    useChatroomMenuOptions(chatroomMenuCustomActions);

  return (
    // Your Custom Code for rendering the header
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

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

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

Reference

For reference checkout this file