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 custom hook that allows access to the provider's data, which are divided into state and actions properties.

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`)

useMessageSearch

The useMessageSearch custom 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 useMessageSearch custom hook exposes two distinct sets of properties: state and actions. The state provides the variables relevant to the component, while actions offers functions that perform operations that have a side effect on the state properties.

The following code shows how to implement with useMessageSearch.

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

List of state properties

The following table lists the state properties of useMessageSearch.

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.
onResultLoaded	function	Specifies the prop to execute custom operations when the search result is loaded. (Default: `null`)
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.
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.

List of actions properties

The following table lists the actions properties of useMessageSearch.

Property name	Type	Description
setCurrentChannel	function	Sets the `currentChannel` instance.
setChannelInvalid	function	Sets the `isInvalid` boolean.
setSelectedMessageId	function	Sets an ID of the message as the `selectedMessageId`.
setQueryInvalid	function	Sets the `isInvalid` boolean to `false`.

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 useMessageSearch

MessageSearchUI

Sample app