---
id: channel_preview_ui
sidebar_position: 4
title: ChannelPreview UI
---

import GHComponentLink from '../../_docusaurus-components/GHComponentLink';

The ChannelPreview UI component receives props via the [`ChannelPreview`](./channel-preview.mdx) 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`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx).

## 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](../../guides/customization/channel-list-preview.mdx#the-preview-prop-component).

```tsx
const YourCustomChannelPreview = (previewProps) => {
  // render custom preview info here
  return <YourCustomChannelPreview {...previewProps} />;
};

<ChannelList Preview={YourCustomChannelPreview} />;
```

## Props

### <div class="label required basic">Required</div> 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 | <GHComponentLink text='Avatar' path='/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 |

### 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:

```typescript jsx
import { 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 | <GHComponentLink text='ChannelPreviewMessenger' path='/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](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.

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