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	Main container for conversation search
lm-conversation-search-go-back-icon	Back button icon
lm-cursor-pointer	Element with pointer cursor
lm-conversation-search-input	Search input container
lm-conversation-search-input-field	Search input text field
lm-conversation-search-list	List of search results
lm-conversation-search-list-item lm-cursor-pointer	Clickable search result item
search-conversation-member-icon	Member avatar in search results
search-conversation-content	Content container for search results
search-conversation-user-meta	User metadata in search results
search-conversation-message	Message preview in search results

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