Skip to main content
Version: v11

ComponentContext

The ComponentContext is a one of the context providers exposed by the 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:

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

Values

Attachment

Custom UI component to display attachment in an individual message.

TypeDefault
componentAttachment

AttachmentPreviewList

Custom UI component to display a attachment previews in MessageInput.

TypeDefault
componentAttachmentPreviewList

AutocompleteSuggestionHeader

Custom UI component to override the default suggestion header component.

TypeDefault
componentHeader

AutocompleteSuggestionItem

Custom UI component to override the default suggestion Item component.

TypeDefault
componentItem

AutocompleteSuggestionList

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

TypeDefault
componentList

Avatar

Custom UI component to display a user's avatar.

TypeDefault
componentAvatar

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 - single image attachment in message list
  • Gallery - group of image attachments in message list
  • AttachmentPreviewList - image uploads preview in message input (composer)

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

The default BaseImage component 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.

TypeDefault
componentBaseImage

CooldownTimer

Custom UI component to display the slow mode cooldown timer.

TypeDefault
componentCooldownTimer

CustomMessageActionsList

Custom UI component to render set of buttons to be displayed in the MessageActionsBox.

TypeDefault
componentCustomMessageActionsList

DateSeparator

Custom UI component for date separators.

TypeDefault
componentDateSeparator

EditMessageInput

Custom UI component to override default edit message input.

TypeDefault
componentEditMessageForm

EmojiIcon

Custom UI component for emoji button in input.

TypeDefault
componentEmojiIconSmall

EmptyStateIndicator

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

TypeDefault
componentEmptyStateIndicator

FileUploadIcon

Custom UI component for file upload icon.

TypeDefault
componentFileUploadIcon

GiphyPreviewMessage

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

TypeDefault
componentGiphyPreviewMessage

HeaderComponent

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

TypeDefault
componentnone

Input

Custom UI component handling how the message input is rendered.

TypeDefault
componentMessageInputFlat

LinkPreviewList

Custom component to render link previews in MessageInput.

TypeDefault
componentMessageInputFlat

LoadingErrorIndicator

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

TypeDefault
componentLoadingErrorIndicator

LoadingIndicator

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

TypeDefault
componentLoadingIndicator

Message

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

TypeDefault
componentMessageSimple

MessageDeleted

Custom UI component for a deleted message.

TypeDefault
componentMessageDeleted

MessageListNotifications

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

TypeDefault
componentDefaultMessageListNotifications

MessageNotification

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

TypeDefault
componentMessageNotification

MessageOptions

Custom UI component for message options popup.

TypeDefault
componentMessageOptions

MessageRepliesCountButton

Custom UI component to display message replies.

TypeDefault
componentMessageRepliesCountButton

MessageStatus

Custom UI component to display message delivery status.

TypeDefault
componentMessageStatus

MessageSystem

Custom UI component to display system messages.

TypeDefault
componentEventComponent

MessageTimestamp

Custom UI component to display a timestamp on a message.

TypeDefault
componentMessageTimestamp

MessageBouncePrompt

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

TypeDefault
componentMessageBouncePrompt

ModalGallery

Custom UI component for viewing message's image attachments.

TypeDefault
componentModalGallery

PinIndicator

Custom UI component to override default pinned message indicator.

TypeDefault
componentPinIndicator

QuotedMessage

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

TypeDefault
componentQuotedMessage

QuotedMessagePreview

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

TypeDefault
componentQuotedMessagePreview

ReactionSelector

Custom UI component to display the reaction selector.

TypeDefault
componentReactionSelector

ReactionsList

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

TypeDefault
componentReactionsList

SendButton

Custom UI component for send button.

TypeDefault
componentSendButton

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 context provider component and ThreadStart 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.

TypeDefault
componentThreadHead

ThreadHeader

Custom UI component to display the header of a Thread.

TypeDefault
componentDefaultThreadHeader

ThreadInput

Custom UI component to replace the MessageInput of a Thread. For the applications using theme version 1, the default is MessageInputSmall. Applications using theme version 2 will use MessageInputFlat by default.

TypeDefault
componentMessageInputSmall (theme v1) / MessageInputFlat (theme v2)

ThreadStart

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

TypeDefault
componentDefaultThreadStart

TriggerProvider

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

TypeDefault
componentDefaultTriggerProvider

TypingIndicator

Custom UI component for the typing indicator.

TypeDefault
componentTypingIndicator

UnreadMessagesNotification

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

TypeDefault
componentUnreadMessagesNotification

UnreadMessagesSeparator

Custom UI component inserted before the first message marked unread.

TypeDefault
componentUnreadMessagesSeparator

VirtualMessage

Custom UI component to display a message in the VirtualizedMessageList.

TypeDefault
componentMessageSimple

Did you find this page helpful?