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	Container or element for lm channel header
lm-header-left	Container or element for lm header left
back-icon header-back-icon	Container or element for back icon header back icon
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	Container or element for lm channel participants
lm-header-right	Container or element for lm header right
lm-channel-icon	Container or element for lm channel icon
lm-chatroom-menu-item	Container or element for lm chatroom menu item

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 HeaderE
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