LMConversationSearch

LMConversationSearch renders the conversation search for the current chatroom. Similar to LMChatroomSearch, it also accepts a prop onCloseSearch calling which will hide the UI.

Props

Property	Type	Description	Optional
onCloseSearch	ZeroArgVoidReturns	Function to close the search screen.

CSS Classnames

Classname	Description
lm-conversation-search	Container or element for lm conversation search
lm-conversation-search-go-back-icon	Container or element for lm conversation search go back icon
lm-cursor-pointer	Container or element for lm cursor pointer
lm-conversation-search-input	Container or element for lm conversation search input
lm-conversation-search-input-field	Container or element for lm conversation search input field
lm-conversation-search-list	Container or element for lm conversation search list
lm-conversation-search-list-item lm-cursor-pointer	Container or element for lm conversation search list item lm cursor pointer
search-conversation-member-icon	Container or element for search conversation member icon
search-conversation-content	Container or element for search conversation content
search-conversation-user-meta	Container or element for search conversation user meta
search-conversation-message	Container or element for search conversation message

Example

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

.search-conversation-content {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Hooks Used

• useConversationSearch

Contexts Used

• LMGlobalClientProviderContext.md

You can also pass your own custom view for LMConversationSearch where you can tweak with the logic and UI for this component.

Below is an example for customising the view for LMConversationSearch and rendering your own view. It is fairly a 2 simple 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 list by using the hook useDMChannelLists.

• Then you just have to pass it as a prop to LMClientOverlayProvider.

• Step 1: Create your own custom view.

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

// Custom Component for Conversation Search
const CustomConversationSearch = () => {
    const {
    searchList,
    searchConversations,
    loadMoreConversations,
    onSearchedConversationClick,
    searchKey,
    setSearchKey,
  } = useConversationSearch();
  return (
    // Your Custom Code to sender views for Conversation search
  );
};

• Step 2: Pass your Custom View to LMClientOverlayProvider

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

// Custom Component for ConversationSearch
const CustomConversationSearch = () => {
    const {
    searchList,
    searchConversations,
    loadMoreConversations,
    onSearchedConversationClick,
    searchKey,
    setSearchKey,
  } = useConversationSearch();
  return (
    // Your Custom Code to sender views for Conversation search
  );

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

Reference

For reference checkout this file