---
id: channel_preview
title: ChannelPreview
---

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

The `ChannelPreview` component is a _UI wrapper component_ which handles the logic of each of the rendered channels within the `ChannelList`.

## Basic Usage

This component is unchangeable and is used by the [`ChannelList`](../core-components/channel-list.mdx) component by default. You can change how your actual UI looks like through the `Preview` prop - read more about it in the [Channel Preview UI](./channel-preview-ui.mdx).

If you don't like the internal logic of the `ChannelPreview` component you can create and supply your own `renderChannels` function to the `ChannelList` through which you can render completely custom preview components with your own logic and UI.

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

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

### getLatestMessagePreview

Custom function that generates the message preview in ChannelPreview component.

| Type                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------- |
| `(channel: Channel, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string \| JSX.Element` |

### 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']` |

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