Message search

Message search is a feature in UIKit that allows users to search for messages within a channel. It retrieves a list of messages that contains the search query in all group channels that the current user is a member of. To implement this search system in your app, you can use the MessageSearch module.

Usage

To start using the MessageSearch module, implement the following code:

import MessageSearch from '@sendbird/uikit-react/MessageSearch';

List of properties

The following table lists the properties of the MessageSearch module.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of `MessageSearchProvider`. (Default: `null`)
searchString	string	Specifies the string of the message to search for. We recommend limiting the number of changes to this value to prevent an overload of search being carried out.
onResultClick	function	Specifies the prop to execute custom operations when the search result is selected. (Default: `null`)
messageSearchQuery	instance	Specifies a MessageSearchQuery instance in `MessageSearch` to customize query operations. (Default: `null`)
onResultLoaded	function	Specifies the prop to execute custom operations when the search results are retrieved. (Default: `null`)
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the search result. (Default: `null`)
renderPlaceholderLoading	ReactElement	Renders a customized placeholder for a loading status in the search result. (Default: `null`)
renderPlaceHolderNoString	ReactElement	Renders a customized placeholder for when there are no messages that match the search query.
renderPlaceholderEmptyList	ReactElement	Renders a customized placeholder for an empty list status when there are no search results. (Default: `null`)
renderSearchItem	ReactElement	Renders a customized view of each message in the search result.

Context

To store and handle data that are used to build a message search UI, the UIKit provides two context objects: MessageSearchProvider and useMessageSearch. The MessageSearchProvider is a context provider that manages all the logic and data used in the group channel view. The useMessageSearch is a context hook that allows access to the provider's data.

MessageSearchProvider

MessageSearchProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using MessageSearchProvider.

import { MessageSearchProvider } from '@sendbird/uikit-react/MessageSearch/context';

List of properties

The following table lists the properties of MessageSearchProvider.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of the `MessageSearchProvider`. (Default: `null`)
searchString	string	Specifies the string of the message to search for. We recommend limiting the number of changes to this value to prevent an overload of search being carried out.
onResultClick	function	Specifies the prop to execute custom operations when the search result is selected. (Default: `null`)
messageSearchQuery	instance	Specifies a MessageSearchQuery instance in `MessageSearch` to customize query operations. (Default: `null`)
onResultLoaded	function	Specifies the prop to execute custom operations when the search results are retrieved. (Default: `null`)

useMessageSearchContext

The useMessageSearchContext context hook exports the data in the provider to the UI components to create a functional view of message search. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The following code shows how to start using useMessageSearchContext.

import { useMessageSearchContext } from '@sendbird/uikit-react/MessageSearch/context';

List of properties

The following table lists the properties of useMessageSearchContext.

Property name	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)
children	ReactElement	Specifies the child components of `MessageSearchProvider`. (Default: `null`)
searchString	string	Specifies the string of the message to search for. We recommend limiting the number of changes to this value to prevent an overload of search being carried out.
onResultClick	function	Specifies the prop to execute custom operations when the search result is selected. (Default: `null`)
messageSearchQuery	instance	Specifies a MessageSearchQuery instance in `MessageSearch` to customize query operations. (Default: `null`)
onResultLoaded	function	Specifies the prop to execute custom operations when the search results are retrieved. (Default: `null`)
requestString	string	Specifies a throttled version of the `searchString` that is stored in the provider.
selectedMessageId	number	Specifies the ID of the selected message in the search results.
setSelectedMessageId	function	Sets an ID of the message as the `selectedMessageId`.
scrollRef	React.Ref	Specifies a ref that allows users to scroll through the messages in the search result.
allMessages	array of objects	Specifies a list of all messages in the search result.
loading	boolean	Determines whether the messages in the search result are loading.
isInvalid	boolean	Determines whether the `channelURL` of the current channel is valid. (Default: `false`)
currentChannel	GroupChannel	Specifies the current group channel.
hasMoreResult	boolean	Determines whether there are more messages to display in the search result.

MessageSearchUI

MessageSearchUI is the only UI component in the MessageSearch module and renders the view of the search results. The view contains a header and message search list and includes placeholders for error and loading statuses. The following code shows how to implement MessageSearchUI.

import MessageSearchUI from '@sendbird/uikit-react/MessageSearch/components/MessageSearchUI';

List of properties

The following table lists the properties of MessageSearchUI.

Property name	Type	Description
renderPlaceHolderError	ReactElement	Renders a customized placeholder for an error status in the search result. (Default: `null`)
renderPlaceholderLoading	ReactElement	Renders a customized placeholder for a loading status in the search result. (Default: `null`)
renderPlaceHolderNoString	ReactElement	Renders a customized placeholder for when there are no messages that match the search query.
renderPlaceholderEmptyList	ReactElement	Renders a customized placeholder for an empty list status when there are no search results. (Default: `null`)
renderSearchItem	ReactElement	Renders a customized view of each message in the search result.

On this page

Usage Context

MessageSearchProvider useMessageSearchContext

MessageSearchUI

Sample app