Skip to main content

ChannelPreview UI

The ChannelPreview UI component receives props via the ChannelPreview wrapper, and these props are a combination of the ChannelPreview props with additional UI specific items. The wrapper also handles the required logic while the UI component is responsible for the UI display and the click functionality for channel selection.

This UI component is set via the Preview prop on ChannelList, and if nothing is provided then the default is used, ChannelPreviewMessenger.

Basic Usage#

This UI component is very customizable; below is an example of how to use the Preview prop, and for a more involved step-by-step guide, using the many provided props, see ChannelPreview Code Example.

const YourCustomChannelPreview = (props) => {
// render custom preview info here
};

<ChannelList
Preview={(previewProps) => <YourCustomChannelPreview {...previewProps} />}
/>;

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

active#

If the component's channel is the active (selected) channel.

Type
boolean

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

displayImage#

Image of channel to display.

Type
string

displayTitle#

Title of channel to display.

Type
string

lastMessage#

The last message received in a channel.

Type
StreamMessage

latestMessage#

Latest message preview to display. Will be either a string or a JSX.Element rendering markdown.

Type
string | JSX.Element

Preview#

The UI component to use for display.

TypeDefault
componentChannelPreviewMessenger

setActiveChannel#

The setter function for a selected channel.

Type
ChatContextValue['setActiveChannel']

unread#

The number of unread Messages.

Type
number

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?