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#
channelTypeThe type of channel
to create on user result selection.
Type | Default |
---|---|
livestream | messaging | team | gaming | commerce | messaging |
#
DropdownContainerCustom UI component to display all of the search results.
Type | |
---|---|
component | DefaultDropdownContainer |
#
onSelectResultCustom handler function to run on search result item selection.
Type |
---|
(user: UserResponse) => Promise\<void> | void |
#
placeholderCustom 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' |
#
popupResultsDisplay search results as an absolutely positioned popup, defaults to false and shows inline.
Type | Default |
---|---|
boolean | false |
#
SearchEmptyCustom UI component to display empty search results.
Type | Default |
---|---|
component | a div with: 'No results found' |
#
searchForChannelsBoolean to search for channels as well as users in the server query, default is false and just searches for users.
Type | Default |
---|---|
boolean | false |
#
searchFunctionCustom search function to override default.
Type |
---|
(ChannelSearchFunctionParams, event: React.BaseSyntheticEvent ) => Promise\<void> | void |
#
SearchInputCustom UI component to display the search text input.
Type | Default |
---|---|
component | HTML input element |
#
SearchLoadingCustom UI component to display the search loading state.
Type | Default |
---|---|
component | a div with: 'Searching...' |
#
searchQueryParamsObject containing filters/sort/options overrides for user search.
Type |
---|
SearchQueryParam |
#
SearchResultItemCustom UI component to display a search result list item.
Type | |
---|---|
component | DefaultSearchResultItem |
#
SearchResultsHeaderCustom UI component to display the search results header.
Type |
---|
component |