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.
| Type | Default |
|---|---|
livestream | messaging | team | gaming | commerce | messaging |
DropdownContainer#
Custom UI component to display all of the search results.
| Type | |
|---|---|
| component | DefaultDropdownContainer |
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'.
| Type | Default |
|---|---|
| string | 'Search' |
popupResults#
Display search results as an absolutely positioned popup, defaults to false and shows inline.
| Type | Default |
|---|---|
| boolean | false |
SearchEmpty#
Custom UI component to display empty search results.
| Type | Default |
|---|---|
| component | a 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.
| Type | Default |
|---|---|
| boolean | false |
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.
| Type | Default |
|---|---|
| component | HTML input element |
SearchLoading#
Custom UI component to display the search loading state.
| Type | Default |
|---|---|
| component | a 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 | |
|---|---|
| component | DefaultSearchResultItem |
SearchResultsHeader#
Custom UI component to display the search results header.
| Type |
|---|
| component |