Skip to main content

ChannelSearch

ChannelSearch is a UI component that searches for chat users and displays the results in a list. It can be used standalone or in the ChannelList via the showChannelSearch prop (default is false). The input searches for users by default, but you can utilize the searchForChannels prop to also search for channels. Completely override the querying via the searchFunction prop. Selection of a search result will set the active channel with the selected user, or if a channel is an option and is selected, set the active channel with the existing channel.

Basic Usage#

Example 1 - used via the showChannelSearch prop.

<Chat client={client}>
<ChannelList filters={filters} sort={sort} options={options} showChannelSearch />
<Channel>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
</Chat>

Props#

channelType#

The type of channel to create on user result selection.

TypeDefault
livestream | messaging | team | gaming | commercemessaging

DropdownContainer#

Custom UI component to display all of the search results.

Type
componentDefaultDropdownContainer

onSelectResult#

Custom handler function to run on search result item selection.

Type
(user: UserResponse) => Promise\<void> | void

placeholder#

Custom placeholder text to be displayed in the search input. Can be passed down from ChannelList via its additionalChannelSearchProps. If using custom i18n translations, it is preferable to change the placeholder value in your translations files under the key 'Search'.

TypeDefault
string'Search'

popupResults#

Display search results as an absolutely positioned popup, defaults to false and shows inline.

TypeDefault
booleanfalse

SearchEmpty#

Custom UI component to display empty search results.

TypeDefault
componenta div with: 'No results found'

searchForChannels#

Boolean to search for channels as well as users in the server query, default is false and just searches for users.

TypeDefault
booleanfalse

searchFunction#

Custom search function to override default.

Type
(ChannelSearchFunctionParams, event: React.BaseSyntheticEvent ) => Promise\<void> | void

SearchInput#

Custom UI component to display the search text input.

TypeDefault
componentHTML input element

SearchLoading#

Custom UI component to display the search loading state.

TypeDefault
componenta div with: 'Searching...'

searchQueryParams#

Object containing filters/sort/options overrides for user search.

Type
SearchQueryParam

SearchResultItem#

Custom UI component to display a search result list item.

Type
componentDefaultSearchResultItem

SearchResultsHeader#

Custom UI component to display the search results header.

Type
component

Did you find this page helpful?