Skip to main content
Version: v11

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.

TypeDefault
componentAvatar

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.

TypeDefault
componentChannelPreviewMessenger

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 }

Did you find this page helpful?