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.

note

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 = ({ latestMessage, lastMessage }) => {
  // "lastMessage" property is for the last
  // message that has been interacted with (pinned/edited/deleted)

  // to display last message of the channel use "latestMessage" property
  return <span>{latestMessage}</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

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

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 }