# Channel Preview

The [`ChannelList`](/chat/docs/sdk/react/v13/components/core-components/channel_list/) `Preview` prop lets you override the UI for each channel list item. The custom component receives props from `ChannelList` and the `ChannelPreview` wrapper, and it is responsible for handling selection (click).

If you don’t provide `Preview`, it defaults to [`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx).

<admonition type="note">

For deeper customization, use [`renderChannels`](/chat/docs/sdk/react/v13/components/core-components/channel_list#renderchannels/). It requires more work than just overriding `Preview`.

</admonition>

## Best Practices

- Preserve selection handling in custom previews to keep navigation working.
- Keep preview rendering fast; it runs for every item in large lists.
- Use `latestMessagePreview` over deprecated `latestMessage`.
- Show unread and delivery status only when it improves list scanability.
- Fall back to default `ChannelPreviewMessenger` when minimal customization is needed.

## Basic Usage

To customize the list item UI, pass your `Preview` component to `ChannelList`. See [The Preview Prop Component](/chat/docs/sdk/react/v13/guides/customization/channel_list_preview#the-preview-prop-component/) for the extended guide.

```tsx
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

### channel

This required prop is the channel to be previewed; comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) 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](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### 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           |
| -------------- |
| `LocalMessage` |

### 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`, `message.delivered` resp. `message.read` WS event.

Possible values are:

- `'read'`
- `'delivered'` - not read
- `'sent'` - not delivered
- `undefined` - last channel message is not own

| Type                    |
| ----------------------- |
| `MessageDeliveryStatus` |

Use `MessageDeliveryStatus` enum to determine the current delivery status, for example:

```tsx
import type { MessageDeliveryStatus } from "stream-chat-react";
import {
  DoubleCheckMarkIcon,
  DoubleCheckMarkIconRead,
  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.SENT && (
        <SingleCheckMarkIcon />
      )}
      {messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && (
        <DoubleCheckMarkIcon />
      )}
      {messageDeliveryStatus === MessageDeliveryStatus.READ && (
        <DoubleCheckMarkIconRead />
      )}
    </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](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) |

### 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](/chat/docs/react/channel_pagination/) for a list of available fields for sort.

| Type                                  |
| ------------------------------------- |
| `{ limit?: number; offset?: number }` |


---

This page was last updated at 2026-04-21T09:53:40.746Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/channel_preview_ui/](https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/channel_preview_ui/).