---
id: component_context
title: ComponentContext
---

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

The `ComponentContext` is a one of the context providers exposed by the [`Channel`](../core-components/channel.mdx) 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();
```

## WithComponents

A component override functionality which utilises `ComponentContext` under the hood. This is direct replacement for a prop-based component overrides which are now slowly being deprecated.

### Basic Usage of WithComponents

In this case, top-level [`MessageInput`](../message-input-components/message-input.mdx) component reaches for the closest overrides and applies `MessageInputUi1`, the [`Thread`](../core-components/thread.mdx) component uses [`MessageInput`](../message-input-components/message-input.mdx) internally and its UI can be also overriden - in this case, the closest one provides override with component `MessageInputUi2`. If we were to remove this `WithComponents` wrapper over [`Thread`](../core-components/thread.mdx) component, the closest override for [`Thread`](../core-components/thread.mdx)'s [`MessageInput`](../message-input-components/message-input.mdx) component would be `MessageInputUi1`.

```tsx
const MessageInputUi1 = () => {
  /*...*/
};
const MessageInputUi2 = () => {
  /*...*/
};

<Channel>
  <WithComponents overrides={{ Input: MessageInputUi1 }}>
    <Window>
      <MessageList />
      <MessageInput focus />
    </Window>
    <WithComponents overrides={{ Input: MessageInputUi2 }}>
      <Thread />
    </WithComponents>
  </WithComponents>
</Channel>;
```

## Values

### Attachment

Custom UI component to display attachment in an individual message.

| Type      | Default                                                                |
| --------- | ---------------------------------------------------------------------- |
| component | <GHComponentLink text='Attachment' path='/Attachment/Attachment.tsx'/> |

### AttachmentPreviewList

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

| Type      | Default                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx'/> |

### AttachmentSelector

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

| Type      | Default                                                                                  |
| --------- | ---------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='AttachmentSelector' path='/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 | <GHComponentLink text='AudioRecorder' path='/MessageInput/AudioRecorder.tsx'/> |

### AutocompleteSuggestionItem

Custom UI component to override the default suggestion Item component.

| Type      | Default                                                             |
| --------- | ------------------------------------------------------------------- |
| component | <GHComponentLink text='Item' path='/AutoCompleteTextarea/Item.js'/> |

### AutocompleteSuggestionList

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

| Type      | Default                                                             |
| --------- | ------------------------------------------------------------------- |
| component | <GHComponentLink text='List' path='/AutoCompleteTextarea/List.js'/> |

### Avatar

Custom UI component to display a user's avatar.

| Type      | Default                                                    |
| --------- | ---------------------------------------------------------- |
| component | <GHComponentLink text='Avatar' path='/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:

- <GHComponentLink text='Image' path='/Gallery/Image.tsx' /> - single image attachment in message list
- <GHComponentLink text='Gallery' path='/Gallery/Gallery.tsx' /> - group of image attachments in message
  list
- <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx' /> - image
  uploads preview in message input (composer)

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

The [default `BaseImage` component](../../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 | <GHComponentLink text='BaseImage' path='/Gallery/BaseImage.tsx'/> |

### CooldownTimer

Custom UI component to display the slow mode cooldown timer.

| Type      | Default                                                                        |
| --------- | ------------------------------------------------------------------------------ |
| component | <GHComponentLink text='CooldownTimer' path='/MessageInput/CooldownTimer.tsx'/> |

### CustomMessageActionsList

Custom UI component to render set of buttons to be displayed in the <GHComponentLink text='MessageActionsBox' path='/MessageActions/MessageActionsBox.tsx' />.

| Type      | Default                                                                                                 |
| --------- | ------------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='CustomMessageActionsList' path='/MessageActions/CustomMessageActionsList.tsx' /> |

### DateSeparator

Custom UI component for date separators.

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | <GHComponentLink text='DateSeparator' path='/DateSeparator/DateSeparator.tsx'/> |

### EditMessageInput

Custom UI component to override default edit message input.

| Type      | Default                                                                            |
| --------- | ---------------------------------------------------------------------------------- |
| component | <GHComponentLink text='EditMessageForm' path='/MessageInput/EditMessageForm.tsx'/> |

### EmojiIcon

Custom UI component for emoji button in input.

| Type      | Default                                                                 |
| --------- | ----------------------------------------------------------------------- |
| component | <GHComponentLink text='EmojiIconSmall' path='/MessageInput/icons.tsx'/> |

### EmptyStateIndicator

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

| Type      | Default                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='EmptyStateIndicator' path='/EmptyStateIndicator/EmptyStateIndicator.tsx'/> |

### FileUploadIcon (deprecated)

Custom UI component for file upload icon. The component is now deprecated. Use [`AttachmentSelectorInitiationButtonContents`](#attachmentselectorinitiationbuttoncontents) instead.

| Type      | Default                                                                 |
| --------- | ----------------------------------------------------------------------- |
| component | <GHComponentLink text='FileUploadIcon' path='/MessageInput/icons.tsx'/> |

### GiphyPreviewMessage

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

| Type      | Default                                                                                   |
| --------- | ----------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='GiphyPreviewMessage' path='/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 | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |

### LinkPreviewList

Custom component to render link previews in `MessageInput`.

| Type      | Default                                                                             |
| --------- | ----------------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/LinkPreviewList.tsx'/> |

### LoadingErrorIndicator

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

| Type      | Default                                                                                   |
| --------- | ----------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='LoadingErrorIndicator' path='/Loading/LoadingErrorIndicator.tsx'/> |

### LoadingIndicator

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

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | <GHComponentLink text='LoadingIndicator' path='/Loading/LoadingIndicator.tsx'/> |

### Message

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

| Type      | Default                                                                   |
| --------- | ------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageSimple' path='/Message/MessageSimple.tsx'/> |

### MessageDeleted

Custom UI component for a deleted message.

| Type      | Default                                                                     |
| --------- | --------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageDeleted' path='/Message/MessageDeleted.tsx'/> |

### MessageListNotifications

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

| Type      | Default                                                                                                    |
| --------- | ---------------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='DefaultMessageListNotifications' path='/MessageList/MessageListNotifications.tsx'/> |

### MessageNotification

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

| Type      | Default                                                                                   |
| --------- | ----------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageNotification' path='/MessageList/MessageNotification.tsx'/> |

### MessageOptions

Custom UI component for message options popup.

| Type      | Default                                                                     |
| --------- | --------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageOptions' path='/Message/MessageOptions.tsx'/> |

### MessageRepliesCountButton

Custom UI component to display message replies.

| Type      | Default                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageRepliesCountButton' path='/Message/MessageRepliesCountButton.tsx'/> |

### MessageStatus

Custom UI component to display message delivery status.

| Type      | Default                                                                   |
| --------- | ------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageStatus' path='/Message/MessageStatus.tsx'/> |

### MessageSystem

Custom UI component to display system messages.

| Type      | Default                                                                            |
| --------- | ---------------------------------------------------------------------------------- |
| component | <GHComponentLink text='EventComponent' path='/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 | <GHComponentLink text='MessageTimestamp' path='/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 | <GHComponentLink text='MessageBouncePrompt' path='/MessageBounce/MessageBouncePrompt.tsx'/> |

### ModalGallery

Custom UI component for viewing message's image attachments.

| Type      | Default                                                                 |
| --------- | ----------------------------------------------------------------------- |
| component | <GHComponentLink text='ModalGallery' path='/Gallery/ModalGallery.tsx'/> |

### PinIndicator

Custom UI component to override default pinned message indicator.

| Type      | Default                                                          |
| --------- | ---------------------------------------------------------------- |
| component | <GHComponentLink text='PinIndicator' path='/Message/icons.tsx'/> |

### PollActions

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

| Type      | Default                                                                        |
| --------- | ------------------------------------------------------------------------------ |
| component | <GHComponentLink text='PollActions' path='/Poll/PollActions/PollActions.tsx'/> |

### PollContent

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

| Type      | Default                                                            |
| --------- | ------------------------------------------------------------------ |
| component | <GHComponentLink text='PollContent' path='/Poll/PollContent.tsx'/> |

### PollCreationDialog

Custom UI component to override default poll creation dialog contents.

| Type      | Default                                                                                             |
| --------- | --------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='PollCreationDialog' path='/Poll/PollCreationDialog/PollCreationDialog.tsx'/> |

### PollHeader

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

| Type      | Default                                                          |
| --------- | ---------------------------------------------------------------- |
| component | <GHComponentLink text='PollHeader' path='/Poll/PollHeader.tsx'/> |

### PollOptionSelector

Custom UI component to override default poll option selector.

| Type      | Default                                                                          |
| --------- | -------------------------------------------------------------------------------- |
| component | <GHComponentLink text='PollOptionSelector' path='/Poll/PollOptionSelector.tsx'/> |

### QuotedMessage

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

| Type      | Default                                                                   |
| --------- | ------------------------------------------------------------------------- |
| component | <GHComponentLink text='QuotedMessage' path='/Message/QuotedMessage.tsx'/> |

### QuotedMessagePreview

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

| Type      | Default                                                                                      |
| --------- | -------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='QuotedMessagePreview' path='/MessageInput/QuotedMessagePreview.tsx'/> |

### QuotedPoll

Custom UI component to override the rendering of quoted poll.

| Type      | Default                                                          |
| --------- | ---------------------------------------------------------------- |
| component | <GHComponentLink text='QuotedPoll' path='/Poll/QuotedPoll.tsx'/> |

### ReactionSelector

Custom UI component to display the reaction selector.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | <GHComponentLink text='ReactionSelector' path='/Reactions/ReactionSelector.tsx'/> |

### ReactionsList

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

| Type      | Default                                                                     |
| --------- | --------------------------------------------------------------------------- |
| component | <GHComponentLink text='ReactionsList' path='/Reactions/ReactionsList.tsx'/> |

### SendButton

Custom UI component for send button.

| Type      | Default                                                             |
| --------- | ------------------------------------------------------------------- |
| component | <GHComponentLink text='SendButton' path='/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 | <GHComponentLink text='ThreadHead' path='/Thread/ThreadHead.tsx'/> |

### ThreadHeader

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

| Type      | Default                                                                 |
| --------- | ----------------------------------------------------------------------- |
| component | <GHComponentLink text='DefaultThreadHeader' path='/Thread/Thread.tsx'/> |

### ThreadInput

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

| Type      | Default                                                                              |
| --------- | ------------------------------------------------------------------------------------ |
| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |

### ThreadStart

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

| Type      | Default                                                                |
| --------- | ---------------------------------------------------------------------- |
| component | <GHComponentLink text='DefaultThreadStart' path='/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 | <GHComponentLink text='Timestamp' path='/Message/Timestamp.tsx'/> |

### TriggerProvider

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

| Type      | Default                                                                                          |
| --------- | ------------------------------------------------------------------------------------------------ |
| component | <GHComponentLink text='DefaultTriggerProvider' path='/MessageInput/DefaultTriggerProvider.tsx'/> |

### TypingIndicator

Custom UI component for the typing indicator.

| Type      | Default                                                                               |
| --------- | ------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='TypingIndicator' path='/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 | <GHComponentLink text='UnreadMessagesNotification' path='/MessageList/UnreadMessagesNotification.tsx'/> |

### UnreadMessagesSeparator

Custom UI component inserted before the first message marked unread.

| Type      | Default                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------- |
| component | <GHComponentLink text='UnreadMessagesSeparator' path='/MessageList/UnreadMessagesSeparator.tsx'/> |

### VirtualMessage

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

| Type      | Default                                                                   |
| --------- | ------------------------------------------------------------------------- |
| component | <GHComponentLink text='MessageSimple' path='/Message/MessageSimple.tsx'/> |
