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.
| Type | Default |
|---|---|
| component | Avatar |
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.
| Type | Default |
|---|---|
| component | ChannelPreviewMessenger |
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 } |