Channel Preview
The ChannelList
prop Preview
allows you to override the preview component which is rendered for each channel in the list (think of it as the UI of a ChannelList
item). The component passed as the Preview
will receive props from the ChannelList
and the ChannelPreview
wrapper (which extends these props with additional UI-specific items and renders it). Apart from the UI the Preview
component is also responsible for channel selection (click handler).
The Preview
property defaults to ChannelPreviewMessenger
component if no custom component is provided.
For even deeper customization of the channel list and channel previews, use the renderChannels
prop of the ChannelList
component. Note, however, that using a custom channel list renderer requires more work than overriding the preview UI.
Basic Usage
To customize the ChannelList
item UI simply pass your custom Preview
component to the ChannelList
. See The Preview Prop Component for the extended guide.
const CustomChannelPreviewUI = ({ latestMessagePreview, lastMessage }) => {
// "lastMessage" property is for the last
// message that has been interacted with (pinned/edited/deleted)
// to display last message of the channel use "latestMessagePreview" property
return <span>{latestMessagePreview}</span>;
};
<ChannelList Preview={CustomChannelPreviewUI} />;
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 avatar for the channel.
Type | Default |
---|---|
component | Avatar |
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 |
displayImage
Image of channel to display.
Type |
---|
string |
displayTitle
Title of channel to display.
Type |
---|
string |
getLatestMessagePreview
Custom function that generates the message preview in ChannelPreview component.
Type |
---|
(channel: Channel, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string \| JSX.Element |
lastMessage
The last message received in a channel.
Type |
---|
StreamMessage |
latestMessage
Deprecated, use latestMessagePreview
instead.
Type |
---|
string \| JSX.Element |
latestMessagePreview
Latest message preview to display. Will be either a string or a JSX.Element rendering markdown.
Type |
---|
string \| JSX.Element |
messageDeliveryStatus
Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. The value is calculated from channel.read
data on mount and updated on every message.new
resp. message.read
WS event.
Type |
---|
MessageDeliveryStatus |
Use MessageDeliveryStatus
enum to determine the current delivery status, for example:
import type { MessageDeliveryStatus } from 'stream-chat-react';
import { DoubleCheckMarkIcon, SingleCheckMarkIcon } from '../icons';
type MessageDeliveryStatusIndicator = {
messageDeliveryStatus: MessageDeliveryStatus;
};
export const MessageDeliveryStatusIndicator = ({
messageDeliveryStatus,
}: MessageDeliveryStatusIndicator) => {
// the last message is not an own message in the channel
if (!messageDeliveryStatus) return null;
return (
<div>
{messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon />}
{messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon />}
</div>
);
};
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.
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 } |