# ComponentContext

The `ComponentContext` is a one of the context providers exposed by the [`Channel`](/chat/docs/sdk/react/v11/components/core-components/channel/) component and is
consumable by all the children of `Channel`. This context provides UI component override options for maximum customization.
All UI overrides that target children of the `Channel` component should be placed as `Channel` component props in order to be injected into the `ComponentContext`.
The `ComponentContext` also exposes the hook `useComponentContext`.

## Basic Usage

Pull values from context with our custom hook:

```jsx
const { Attachment, Avatar, Message } = useComponentContext();
```

## Values

### Attachment

Custom UI component to display attachment in an individual message.

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

### AttachmentPreviewList

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

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

### AutocompleteSuggestionHeader

Custom UI component to override the default suggestion header component.

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

### AutocompleteSuggestionItem

Custom UI component to override the default suggestion Item component.

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

### AutocompleteSuggestionList

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

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

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

### BaseImage

Custom UI component to display image resp. a fallback in case of load error, in `<img/>` element. The default resp. custom (from `ComponentContext`) `BaseImage` component is rendered by:

- [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) - single image attachment in message list
- [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) - group of image attachments in message
  list
- [AttachmentPreviewList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) - image
  uploads preview in message input (composer)

The `BaseImage` component accepts the same props as `<img/>` element.

The [default `BaseImage` component](/chat/docs/sdk/react/v11/components/utility-components/base-image/) tries to load and display an image and if the load fails, then an SVG image fallback is applied to the `<img/>` element as a CSS mask targeting attached `str-chat__base-image--load-failed` class.

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

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

### CustomMessageActionsList

Custom UI component to render set of buttons to be displayed in the [MessageActionsBox](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActionsBox.tsx).

| Type      | Default                                                                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.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) |

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

### EmojiIcon

Custom UI component for emoji button in input.

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

### EmptyStateIndicator

Custom UI component to be displayed when the `MessageList` 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) |

### HeaderComponent

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

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

### 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 | [MessageInputFlat](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) |

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

### 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).

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

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

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

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

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

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

### 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`. For the applications using [theme version 1](/chat/docs/sdk/react/v11/guides/theming/css-and-theming/), the default is `MessageInputSmall`. Applications using [theme version 2](/chat/docs/sdk/react/v11/theming/themingv2/) will use `MessageInputFlat` by default.

| Type      | Default                                                                                                                                                                                                                                                                                   |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageInputSmall (theme v1)](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) / [MessageInputFlat (theme v2)](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) |

### TriggerProvider

Optional context provider that lets you override the default autocomplete triggers.

| Type      | Default                                                                                                                                     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.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) |

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


---

This page was last updated at 2026-05-22T16:32:10.662Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/components/contexts/component-context/](https://getstream.io/chat/docs/sdk/react/v11/components/contexts/component-context/).