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 UsageThis 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} />}
/>;
#
PropsRequired 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 |
#
activeIf the component's channel is the active (selected) channel.
Type |
---|
boolean |
#
activeChannelThe currently selected channel object.
Type |
---|
Channel |
#
AvatarThe custom UI component to display the an avatar for the channel.
Type | Default |
---|---|
component | Avatar |
#
channelUpdateCountA number that forces the update of the preview component on channel update.
Type |
---|
number |
#
displayImageImage of channel to display.
Type |
---|
string |
#
displayTitleTitle of channel to display.
Type |
---|
string |
#
lastMessageThe last message received in a channel.
Type |
---|
StreamMessage |
#
latestMessageLatest message preview to display. Will be either a string or a JSX.Element rendering markdown.
Type |
---|
string | JSX.Element |
#
PreviewThe UI component to use for display.
Type | Default |
---|---|
component | ChannelPreviewMessenger |
#
setActiveChannelThe setter function for a selected channel
.
Type |
---|
ChatContextValue['setActiveChannel'] |
#
unreadThe number of unread Messages.
Type |
---|
number |
#
watchersThe object containing watcher parameters. See the Pagination documentation for a list of available fields for sort.
Type |
---|
{ limit?: number; offset?: number } |