LMClientOverlayProvider

LMClientOverlayProvider is the base component for LikeMinds Chat SDK. It sits at the top of component hierarchy tree and host all the internal components of SDK.

Props

Property	Type	Description	Optional
`client`	`LMClient`	Instance of the chat client.
`userDetails`	`UserDetails`	Details of the logged-in user.
`lmChatCoreCallbacks`	`LMCoreCallbacks`	Core event callbacks for chat interactions.	✔️
`attachmentOptions`	`LMInputAttachments[]`	List of available attachment options.	✔️
`customComponents`	`CustomComponents`	Custom UI components for the chat interface.	✔️
`customCallbacks`	`LMChatCustomActions`	Custom callback functions for chat actions.	✔️
`lmChatTheme`	`LMChatTheme`	Theme settings for the chat UI.

Example Usage

import { LMClientOverlayProvider } from "@likeminds.community/likeminds-chat-reactjs";

export function ExampleComponent() {
  return <LMClientOverlayProvider />;
}

Advanced Customisations

Hooks Used

useUserProvider

Contexts Used

Customising Empty User Screen

You can also pass your custom component to replace the default view for Empty User Screen. This will just be a static screen.

Below is an example for customising the view for Empty User Screen and rendering your own view. It is fairly a 2 simple step process

First you create your own custom component. For this particular component you don't need to use any hook or context, since this is just a static screen.
Step 1: Create your own custom view.

const CustomEmptyUserScreen = () => {
  return (
    // Your Custom Code
  );
};

Step 2: Pass your Custom View to LMClientOverlayProvider

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

// Custom Component for UserNotLoaded
const CustomEmptyUserScreen = () => {
  return (
    // Your Custom Code
  );
};

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

Customising User Load Error Screen

You can also pass your custom component to replace the default view for Empty User Screen. This will just be a static screen.

Below is an example for customising the view for Empty User Screen and rendering your own view. It is fairly a 2 simple step process

First you create your own custom component. For this particular component you don't need to use any hook or context, since this is just a static screen.
Step 1: Create your own custom view.

const CustomUserLoadErrorScreen = () => {
  return (
    // Your Custom Code
  );
};

Step 2: Pass your Custom View to LMClientOverlayProvider

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

// Custom Component for UserNotLoaded
const CustomUserLoadErrorScreen = () => {
  return (
    // Your Custom Code
  );
};

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

Reference

For reference checkout this file

LMClientOverlayProvider

Props​

Example Usage​

Advanced Customisations​

Hooks Used​

Contexts Used​

Customising Empty User Screen​

Customising User Load Error Screen​

Reference​