UIKit React v3
UIKit React
UIKit
React
Home
/
UIKit
/
React
This is the new Docs for UIKit v3 beta for React. To see the previous Docs, click here.

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
RequiredTypeDescription

channelUrl

string

Specifies the URL of the open channel. (Default: null)

OptionalTypeDescription

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, Sendbird UIKit provides two context objects: MessageSearchProvider and useMessageSearch hook. MessageSearchProvider is a context provider that manages all the logic and data used in the open channel view. 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
RequiredTypeDescription

channelUrl

string

Specifies the URL of the open channel. (Default: null)

OptionalTypeDescription

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 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 useMessageSearch.

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

List of properties

The following table lists the properties of useMessageSearch.

Property nameTypeDescription

channelUrl

string

Specifies the URL of the open 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

SendBird.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 nameTypeDescription

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.