# Channel

The `Channel` component wraps the logic, state, and UI for a single chat channel. It provides four contexts to its children:

- [`ChannelStateContext`](/chat/docs/sdk/react/v13/components/contexts/channel_state_context/) - stateful data (ex: `messages` or `members`)
- [`ChannelActionContext`](/chat/docs/sdk/react/v13/components/contexts/channel_action_context/) - action handlers (ex: `sendMessage` or `openThread`)
- [`ComponentContext`](/chat/docs/sdk/react/v13/components/contexts/component_context/) - custom component UI overrides (ex: `Avatar` or `Message`)
- [`TypingContext`](/chat/docs/sdk/react/v13/components/contexts/typing_context/) - object of currently typing users (i.e., `typing`)

## Best Practices

- Use `ChannelList` to manage active channels unless you need custom switching logic.
- Pass the `channel` prop only when you control selection; avoid it when using `ChannelList`.
- Keep component overrides focused on UI, and reuse default behaviors where possible.
- Set `channelQueryOptions` intentionally to balance initial load time and message history.
- Access context via hooks inside `Channel` children to avoid stale or missing data.

<admonition type="note">

`Channel` renders a single `channel` object. For details about channel objects, see the [JavaScript docs](/chat/docs/javascript/creating_channels/).

</admonition>

## Basic Usage

`Channel` doesn’t render UI on its own. You can use it with or without `ChannelList`:

- If you use `ChannelList`, don’t pass a `channel` prop—`ChannelList` sets the active channel.
- If you don’t use `ChannelList`, you must pass the `channel` prop.

**Example 1** - without `ChannelList`

```tsx
<Chat client={client}>
  <Channel channel={channel}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>
```

**Example 2** - with `ChannelList`

```tsx
<Chat client={client}>
  <ChannelList />
  <Channel>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>
```

Any child of `Channel` can access these contexts via hooks:

```tsx
const { messages } = useChannelStateContext();
const { sendMessage } = useChannelActionContext();
const { Avatar } = useComponentContext();
const { typing } = useTypingContext();
```

## Registering Custom Components

To customize UI, pass custom components as `Channel` props. Any TitleCase prop overrides the SDK default. See the full list in the [`ComponentContext` docs](/chat/docs/sdk/react/v13/components/contexts/component_context/).

**Example of registering custom Avatar component**

```tsx
import {
  Channel,
  ChannelList,
  Chat,
  MessageInput,
  MessageList,
} from "stream-chat-react";
import { CustomTooltip } from "../Tooltip/CustomTooltip";

const Avatar = ({ image, title }) => {
  return (
    <>
      <CustomTooltip>{title}</CustomTooltip>
      <div className="avatar-image">
        <img src={image} alt={title} />
      </div>
    </>
  );
};

export const App = (
  <Chat client={client}>
    <ChannelList />
    <Channel Avatar={Avatar}>
      <MessageList />
      <MessageInput />
    </Channel>
  </Chat>
);
```

## Props

### channel

The currently active `StreamChat` `channel` instance to be loaded into the `Channel` component and referenced by its children.

```tsx
const channel = client.channel("messaging", {
  members: ["nate", "roy"],
});
```

<admonition type="warning">

Do not provide this prop if you are using the `ChannelList` component, as it handles `channel` setting logic.

</admonition>

| Type   |
| ------ |
| object |

### activeUnreadHandler

Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab.

| Type                                            |
| ----------------------------------------------- |
| (unread: number, documentTitle: string) => void |

### allowConcurrentAudioPlayback

Allows multiple audio players to play the audio at the same time. Disabled by default. Present since v13.12.0.

| Type    |
| ------- |
| boolean |

### Attachment

Custom UI component to display a message attachment.

| Type      | Default                                                                                                           |
| --------- | ----------------------------------------------------------------------------------------------------------------- |
| component | [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) |

### AttachmentPreviewList

Custom UI component to display an attachment previews in `MessageInput`.

| Type      | Default                                                                                                                                   |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| component | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) |

### AttachmentSelector

Custom UI component to control adding attachments to MessageInput, defaults to and accepts same props as:

| Type      | Default                                                                                                                             |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| component | [AttachmentSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentSelector.tsx) |

### AttachmentSelectorInitiationButtonContents

Custom UI component for contents of attachment selector initiation button.

| Type      |
| --------- |
| component |

### AudioRecorder

Custom UI component to display AudioRecorder in `MessageInput`.

| Type      | Default                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------- |
| component | [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) |

### AutocompleteSuggestionItem

Custom UI component to override the default suggestion Item component.

| Type      | Default                                                                                                                                                |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [SuggestionListItem](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx) |

### AutocompleteSuggestionList

Custom UI component to override the default List component that displays suggestions.

| Type      | Default                                                                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [SuggestionList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/SuggestionList/SuggestionList.tsx) |

### Avatar

Custom UI component to display a user's avatar.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### channelQueryOptions

Optional configuration parameters used for the initial channel query. Applied only if the value of `channel.initialized` is false. If the channel instance has already been initialized (channel has been queried), then the channel query will be skipped and channelQueryOptions will not be applied.

In the example below, we specify, that the first page of messages when a channel is queried should have 20 messages (the default is 100). Note that the `channel` prop has to be passed along `channelQueryOptions`.

```tsx
import { ChannelQueryOptions } from "stream-chat";
import { Channel, useChatContext } from "stream-chat-react";

const channelQueryOptions: ChannelQueryOptions = {
  messages: { limit: 20 },
};

type ChannelRendererProps = {
  id: string;
  type: string;
};

const ChannelRenderer = ({ id, type }: ChannelRendererProps) => {
  const { client } = useChatContext();
  return (
    <Channel
      channel={client.channel(type, id)}
      channelQueryOptions={channelQueryOptions}
    >
      {/* Channel children */}
    </Channel>
  );
};
```

| Type                  |
| --------------------- |
| `ChannelQueryOptions` |

### CooldownTimer

Custom UI component to display the slow mode cooldown timer.

| Type      | Default                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------- |
| component | [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) |

### DateSeparator

Custom UI component for date separators.

| Type      | Default                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------- |
| component | [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator/DateSeparator.tsx) |

### doDeleteMessageRequest

Custom action handler to override the default `client.deleteMessage(message.id)` function.

| Type                                                  |
| ----------------------------------------------------- |
| `(message: LocalMessage) => Promise<MessageResponse>` |

The function can execute different logic for message replies compared to messages in the main message list based on the `parent_id` property of `LocalMessage` object:

```tsx
import { Channel } from 'stream-chat-react';
import type { LocalMessage } from 'stream-chat';

const doDeleteMessageRequest = async (message: LocalMessage) => {
    if (message.parent_id) {
        // do something before / after deleting a message reply
    } else {
        // do something before / after deleting a message
    }
}

const App = () => (
  {/* more components */}
    <Channel doDeleteMessageRequest={ doDeleteMessageRequest }>
        {/* more components */}
    </Channel>
  {/* more components */}
);
```

### doMarkReadRequest

Custom action handler to override the default `channel.markRead` request function (advanced usage only). The function takes two arguments:

| Argument                  | Type                                    | Description                                                                                             |
| ------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `channel`                 | `Channel`                               | The current channel object instance                                                                     |
| `setChannelUnreadUiState` | `(state: ChannelUnreadUiState) => void` | Function that allows us to set the unread state for the components reflecting the unread message state. |

| Type     |
| -------- |
| function |

### doSendMessageRequest

Custom action handler to override the default `channel.sendMessage` request function (advanced usage only).

| Type     |
| -------- |
| function |

### doUpdateMessageRequest

Custom action handler to override the default `client.updateMessage` request function (advanced usage only).

| Type     |
| -------- |
| function |

### EditMessageInput

Custom UI component to override default edit message input.

| Type      | Default                                                                                                                       |
| --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| component | [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) |

### EditMessageModal

Custom UI component to override default EditMessageModal component. It is useful when we want to override `additionalMessageInputProps`, e.g. number of rows in the textarea:

```tsx
import {
  Channel,
  EditMessageModal,
  EditMessageModalProps,
} from "stream-chat-react";

const CustomEditMessageModal = (props: EditMessageModalProps) => (
  <EditMessageModal
    additionalMessageInputProps={{
      ...props.additionalMessageInputProps,
      maxRows: 10,
    }}
  />
);
const Component = ({ children }) => (
  <Channel EditMessageModal={CustomEditMessageModal}>{children}</Channel>
);
```

| Type      | Default                                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| component | [EditMessageModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) |

### emojiSearchIndex

Custom search mechanism instance or object to enable emoji autocomplete.

| Type   | Default   |
| ------ | --------- |
| object | undefined |

### EmojiPicker

Custom UI component to be rendered in the `MessageInput` component, see [Emoji Picker guide](/chat/docs/sdk/react/v13/guides/customization/emoji_picker/) for more information.

| Type      | Default   |
| --------- | --------- |
| component | undefined |

### EmptyPlaceholder

Custom UI component to be shown if no active `channel` is set, defaults to `null` and skips rendering the `Channel` component.

| Type      | Default |
| --------- | ------- |
| component | null    |

### EmptyStateIndicator

Custom UI component to be displayed when the `MessageList` or `VirtualizedMessageList` is empty.

| Type      | Default                                                                                                                                      |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) |

### FileUploadIcon

Custom UI component for file upload icon.

| Type      | Default                                                                                                            |
| --------- | ------------------------------------------------------------------------------------------------------------------ |
| component | [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) |

### GiphyPreviewMessage

Custom UI component to render a Giphy preview in the `VirtualizedMessageList`.

| Type      | Default                                                                                                                              |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| component | [GiphyPreviewMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/GiphyPreviewMessage.tsx) |

### giphyVersion

The Giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.

| Type   | Default        |
| ------ | -------------- |
| string | 'fixed_height' |

### HeaderComponent

Custom UI component to render at the top of the `MessageList`.

| Type      | Default |
| --------- | ------- |
| component | none    |

### imageAttachmentSizeHandler

A custom function to provide size configuration for image attachments

| Type                                                              |
| ----------------------------------------------------------------- |
| `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |

### initializeOnMount

Allows to prevent triggering the `channel.watch()` (triggers channel query HTTP request) call when mounting the `Channel` component (the default behavior) with uninitialized (`channel.initialized`) `Channel` instance. That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client. Preventing to initialize the channel on mount allows us to postpone the channel creation in the Stream's DB to a later point in time, for example, when a first message is sent:

```typescript jsx
import { useCallback } from 'react';
import {
  getChannel,
  MessageInput as StreamMessageInput,
  MessageInputProps,
  useChannelActionContext,
  useChatContext,
} from 'stream-chat-react';
import type { Message, LocalMessage, SendMessageOptions } from 'stream-chat';

import { useChannelInitContext } from '../../context/ChannelInitProvider';

export const MessageInput = (props: MessageInputProps) => {
  const { client } = useChatContext();
  const { sendMessage } = useChannelActionContext();
  const { setInitializedChannelOnMount } = useChannelInitContext();

  const submitHandler: MessageInputProps['overrideSubmitHandler'] = useCallback(
    async (params: {
      cid: string;
      localMessage: LocalMessage;
      message: Message;
      sendOptions: SendMessageOptions;
    }) => {
      const [channelType, channelId] = cid.split(':');
      const channel = client.channel(channelType, channelId);
      if (!channel.initialized) {
        await getChannel({ channel, client });
        setInitializedChannelOnMount(true);
      }

      await sendMessage({localMessage, message, options: sendOptions});
    },
    [client, sendMessage, setInitializedChannelOnMount],
  );

  return <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />;
};
```

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### Input

Custom UI component handling how the message input is rendered.

| Type      | Default                                                                                                                         |
| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) |

### LinkPreviewList

Custom component to render link previews in `MessageInput`.

| Type      | Default                                                                                                                       |
| --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| component | [LinkPreviewList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/LinkPreviewList.tsx) |

### LoadingErrorIndicator

Custom UI component to be shown if the channel query fails.

| Type      | Default                                                                                                                              |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| component | [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) |

### LoadingIndicator

Custom UI component to render while the `MessageList` is loading new messages.

| Type      | Default                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------- |
| component | [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) |

### markReadOnMount

Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### Message

Custom UI component to display a message in the standard `MessageList`.

| Type      | Default                                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| component | [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) |

### MessageActions

Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx).

| Type      | Default                                                                                                                                    |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) |

### MessageBlocked

Custom UI component for a moderation-blocked message, defaults to and accepts same props as: [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx)

| Type      | Default                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------- |
| component | [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) |

### MessageBouncePrompt

Custom UI component for the content of the modal dialog for messages that got bounced by the moderation rules.

| Type      | Default                                                                                                                                |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) |

### MessageDeleted

Custom UI component for a deleted message.

| Type      | Default                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------- |
| component | [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) |

### MessageListNotifications

Custom UI component that displays message and connection status notifications in the `MessageList`.

| Type      | Default                                                                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) |

### MessageNotification

Custom UI component to display a notification when scrolled up the list and new messages arrive.

| Type      | Default                                                                                                                              |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| component | [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) |

### MessageOptions

Custom UI component for message options popup.

| Type      | Default                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------- |
| component | [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) |

### MessageRepliesCountButton

Custom UI component to display message replies.

| Type      | Default                                                                                                                                      |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) |

### MessageStatus

Custom UI component to display message delivery status.

| Type      | Default                                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| component | [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) |

### MessageSystem

Custom UI component to display system messages.

| Type      | Default                                                                                                                       |
| --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| component | [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) |

### MessageTimestamp

Custom UI component to display a timestamp on a message. This does not include a timestamp for edited messages.

| Type      | Default                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) |

See also [`Timestamp`](#timestamp).

### Modal

Custom UI component for viewing content in a modal, defaults to and accepts the same props as [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx).

It is possible to override the default `Modal` component with `GlobalModal` to have the content displayed via React portal at the top of the Chat components tree:

```tsx
import { GlobalModal } from "stream-chat-react";

const Component = () => <Channel Modal={GlobalModal}></Channel>;
```

Using the `GlobalModal` prevents UI glitches in some browsers (e.g. Safari cutting of the modal overlay to the dimensions of the message list).

| Type      | Default                                                                                            |
| --------- | -------------------------------------------------------------------------------------------------- |
| component | [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx) |

### ModalGallery

Custom UI component for viewing message's image attachments.

| Type      | Default                                                                                                            |
| --------- | ------------------------------------------------------------------------------------------------------------------ |
| component | [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) |

### onMentionsClick

Custom action handler function to run on click of an @mention in a message.

| Type     |
| -------- |
| function |

### onMentionsHover

Custom action handler function to run on hover of an @mention in a message.

| Type     |
| -------- |
| function |

### PinIndicator

Custom UI component to override default pinned message indicator.

| Type      | Default                                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------------------- |
| component | [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) |

### PollActions

Custom UI component to override default poll actions rendering in a message.

| Type      | Default                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------- |
| component | [PollActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollActions/PollActions.tsx) |

### PollContent

Custom UI component to override default poll rendering in a message.

| Type      | Default                                                                                                       |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| component | [PollContent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollContent.tsx) |

### PollCreationDialog

Custom UI component to override default poll creation dialog contents.

| Type      | Default                                                                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [PollCreationDialog](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx) |

### PollHeader

Custom UI component to override default poll header in a message.

| Type      | Default                                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------------------- |
| component | [PollHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollHeader.tsx) |

### PollOptionSelector

Custom UI component to override default poll option selector.

| Type      | Default                                                                                                                     |
| --------- | --------------------------------------------------------------------------------------------------------------------------- |
| component | [PollOptionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollOptionSelector.tsx) |

### QuotedMessage

Custom UI component to override quoted message UI on a sent message.

| Type      | Default                                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| component | [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) |

### QuotedMessagePreview

Custom UI component to override the message input's quoted message preview.

| Type      | Default                                                                                                                                 |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| component | [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) |

### QuotedPoll

Custom UI component to override the rendering of quoted poll.

| Type      | Default                                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------------------- |
| component | [QuotedPoll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/QuotedPoll.tsx) |

### ReactionSelector

Custom UI component to display the reaction selector.

| Type      | Default                                                                                                                      |
| --------- | ---------------------------------------------------------------------------------------------------------------------------- |
| component | [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) |

### ReactionsList

Custom UI component to display the list of reactions on a message.

| Type      | Default                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------- |
| component | [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) |

### ReactionsListModal

Custom UI component to display the modal with detailed listing of reactions. The modal is rendered upon clicking on the `ReactionsList`.

| Type      | Default                                                                                                                     |
| --------- | --------------------------------------------------------------------------------------------------------------------------- |
| component | [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) |

### ReminderNotification

Custom UI component to display the message reminder information in the Message UI component.

| Type      | Default                                                                                                                            |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| component | [ReminderNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/ReminderNotification.tsx) |

### SendButton

Custom UI component for send button.

| Type      | Default                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------- |
| component | [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) |

### shouldGenerateVideoThumbnail

You can turn on/off thumbnail generation for video attachments

| Type    |
| ------- |
| boolean |

### skipMessageDataMemoization

If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages).

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### TextareaComposer

Custom UI component to handle message text input

| Type      | Default                                                                                                                             |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| component | [TextareaComposer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) |

### ThreadHead

Custom UI component to be displayed at the beginning of a thread. By default, it is the thread parent message. It is composed of [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Message.tsx) context provider component and [ThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadStart.tsx) component. The latter can be customized by passing custom component to `Channel` props. The `ThreadHead` component defaults to and accepts the same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx).

| Type      | Default                                                                                                       |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| component | [ThreadHead](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadHead.tsx) |

### ThreadHeader

Custom UI component to display the header of a `Thread`.

| Type      | Default                                                                                                            |
| --------- | ------------------------------------------------------------------------------------------------------------------ |
| component | [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) |

### ThreadInput

Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.

| Type      | Default                                                                                                                         |
| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) |

### ThreadStart

Custom UI component to display the start of a threaded `MessageList`.

| Type      | Default                                                                                                           |
| --------- | ----------------------------------------------------------------------------------------------------------------- |
| component | [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) |

### Timestamp

Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages.

| Type      | Default                                                                                                      |
| --------- | ------------------------------------------------------------------------------------------------------------ |
| component | [Timestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Timestamp.tsx) |

### TypingIndicator

Custom UI component for the typing indicator.

| Type      | Default                                                                                                                          |
| --------- | -------------------------------------------------------------------------------------------------------------------------------- |
| component | [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) |

### UnreadMessagesNotification

Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`.

| Type      | Default                                                                                                                                            |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) |

### UnreadMessagesSeparator

Custom UI component inserted before the first message marked unread.

| Type      | Default                                                                                                                                      |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) |

### videoAttachmentSizeHandler

A custom function to provide size configuration for video attachments

| Type                                                              |
| ----------------------------------------------------------------- |
| `(a: Attachment, e: HTMLElement) => VideoAttachmentConfiguration` |

### VirtualMessage

Custom UI component to display a message in the `VirtualizedMessageList`.

| Type      | Default                                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| component | [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) |

### StreamedMessageText

Custom UI component to display an AI generated message.

| Type      | Default                                                                                                                          |
| --------- | -------------------------------------------------------------------------------------------------------------------------------- |
| component | [StreamedMessageText](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/StreamedMessageText.tsx) |

### StopAIGenerationButton

Custom UI component to display the button to stop AI generation instead of the `SendButton` one in `MessageInput`.

| Type      | Default                                                                                                                                     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [StopAIGenerationButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/StopAIGenerationButton.tsx) |


---

This page was last updated at 2026-04-22T16:43:05.402Z.

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