ChannelPreview
The ChannelPreview
component is a UI wrapper component which handles the logic of each of the rendered channels within the ChannelList
.
Basic Usage
This component is unchangeable and is used by the ChannelList
component by default. You can change how your actual UI looks like through the Preview
prop - read more about it in the Channel Preview UI.
If you don't like the internal logic of the ChannelPreview
component you can create and supply your own renderChannels
function to the ChannelList
through which you can render completely custom preview components with your own logic and UI.
Props
Required channel
This required prop is the channel
to be previewed; comes from either the channelRenderFilterFn
or usePaginatedChannels
call from ChannelList and does not need to be set manually.
Type |
---|
Channel |
activeChannel
The currently selected channel object.
Type |
---|
Channel |
Avatar
The custom UI component to display the avatar for the channel.
Type | Default |
---|---|
component | Avatar |
channelUpdateCount
A number that forces the update of the preview component on channel update.
Type |
---|
number |
className
Custom class for the channel preview root
Type |
---|
string |
onSelect
Custom handler invoked when the ChannelPreview
is clicked. The SDK uses ChannelPreview
to display items of channel search results. There, behind the scenes, the new active channel is set.
Type |
---|
(event: React.MouseEvent) => void |
Preview
The UI component to use for display.
Type | Default |
---|---|
component | ChannelPreviewMessenger |
setActiveChannel
The setter function for a selected channel
.
Type |
---|
ChatContextValue['setActiveChannel'] |
watchers
The object containing watcher parameters. See the Pagination documentation for a list of available fields for sort.
Type |
---|
{ limit?: number; offset?: number } |