Skip to main content

ChannelPreview

The ChannelPreview component is a wrapper component that handles the logic and functionality for a provided (or the default) channel preview and ultimately dictates the display via the component's Preview prop.

Basic Usage#

You will not need to use the ChannelPreview component directly. If creating a custom preview component, you can take advantage of this component's logic while dictating the design and display by utilizing the Preview prop on ChannelList. This prop from the parent component ultimately sets the Preview prop in ChannelPreview. If this optional prop is not provided the default UI component is ChannelPreviewMessenger.

Example 1

const YourCustomChannelPreview = (props) => {  // render custom preview info here};
<ChannelList  options={options}  sort={sort}  Preview={(previewProps) => <YourCustomChannelPreview {...previewProps} />}/>;

Props#

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 an avatar for the channel.

TypeDefault
componentAvatar

channelUpdateCount#

A number that forces the update of the preview component on channel update.

Type
number

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?