Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Message search is a feature that allows users to search for messages within a specific channel. It retrieves a list of messages that contains a search query from group channels joined by a user. They can search for either an exact match or a partial match.

Users can use this feature through the search bar in the message search view. When they search for a keyword in the search bar, the message search view will display the search results as shown below. Users can locate the message that they’re looking for by selecting the message result.

Note : To learn how to implement a search system within your app, refer to Search messages.

You can customize the UI for message search by using renderSearchItem. This property of MessageSearch customizes the view of the searched message results.

import { SendBirdProvider, MessageSearch } from 'sendbird-uikit';
import "sendbird-uikit/dist/index.css";

const MyApp = () => {
  return (
    <SendBirdProvider>
      <MessageSearch
        channelUrl={channelUrl: string}
        searchString={textInput: string}
        messageSearchQuery={query: MessageSearchQuery}
        renderSearchItem={({ message, onResultClick }) => {
          return () => <CustomSearchItem message={message} />;
        }}
        onResultLoaded={(message, error) => {}}
        onResultClick={(message) => {}}
      />
    </SendBirdProvider>
  );
}