# ComponentContext
The `ComponentContext` is a one of the context providers exposed by the [`Channel`](/chat/docs/sdk/react/v12/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();
```
## 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`](/chat/docs/sdk/react/v12/components/message-input-components/message-input/) component reaches for the closest override and applies `CustomMessageInputUi1`, the [`Thread`](/chat/docs/sdk/react/v12/components/core-components/thread/) component uses [`MessageInput`](/chat/docs/sdk/react/v12/components/message-input-components/message-input/) internally and which could be also overriden - in this case, the closest override is `CustomMessageInputUi2`. If we were to remove `WithComponents` wrapper rendered over the [`Thread`](/chat/docs/sdk/react/v12/components/core-components/thread/) component, the closest override for [`Thread`](/chat/docs/sdk/react/v12/components/core-components/thread/)'s [`MessageInput`](/chat/docs/sdk/react/v12/components/message-input-components/message-input/) component would be `CustomMessageInputUi1`. No `WithComponents` wrapper means that both components use their defaults defined internally.
```tsx
const CustomMessageInputUi1 = () => {
/*...*/
};
const CustomMessageInputUi2 = () => {
/*...*/
};
;
```
Or you can use it like this where [`MessageInput`](/chat/docs/sdk/react/v12/components/message-input-components/message-input/) rendered within [`Window`](/chat/docs/sdk/react/v12/components/utility-components/window/) will use `CustomMessageInputUi2` override, [`ThreadList`](/chat/docs/sdk/react/v12/components/core-components/thread-list/) rendered within [`ChatView.Threads`](/chat/docs/sdk/react/v12/components/utility-components/chat-view/) will use `CustomThreadListItem` override and both [`Thread`](/chat/docs/sdk/react/v12/components/core-components/thread/) components will use `CustomMessageInputUi1` override for their internal [`MessageInput`](/chat/docs/sdk/react/v12/components/message-input-components/message-input/) components.
```tsx
const CustomThreadListItem = () => {
/*...*/
};
{/*...*/}
;
```
## 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) |
### 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 | [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 `![]()
` 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 `![]()
` element.
The [default `BaseImage` component](/chat/docs/sdk/react/v12/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 `![]()
` 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 (deprecated)
Custom UI component for file upload icon. The component is now deprecated. Use [`AttachmentSelectorInitiationButtonContents`](#attachmentselectorinitiationbuttoncontents) instead.
| 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) |
### 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) |
### 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`. 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) |
### 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:11.406Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v12/components/contexts/component-context/](https://getstream.io/chat/docs/sdk/react/v12/components/contexts/component-context/).