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.

Type	Default
component	Attachment

AttachmentPreviewList

Custom UI component to display a attachment previews in MessageInput.

Type	Default
component	AttachmentPreviewList

AutocompleteSuggestionHeader

Custom UI component to override the default suggestion header component.

Type	Default
component	Header

AutocompleteSuggestionItem

Custom UI component to override the default suggestion Item component.

Type	Default
component	Item

AutocompleteSuggestionList

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

Type	Default
component	List

Avatar

Custom UI component to display a user's avatar.

Type	Default
component	Avatar

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.

Type	Default
component	BaseImage

CooldownTimer

Custom UI component to display the slow mode cooldown timer.

Type	Default
component	CooldownTimer

CustomMessageActionsList

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

Type	Default
component	CustomMessageActionsList

DateSeparator

Custom UI component for date separators.

Type	Default
component	DateSeparator

EditMessageInput

Custom UI component to override default edit message input.

Type	Default
component	EditMessageForm

EmojiIcon

Custom UI component for emoji button in input.

Type	Default
component	EmojiIconSmall

EmptyStateIndicator

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

Type	Default
component	EmptyStateIndicator

FileUploadIcon

Custom UI component for file upload icon.

Type	Default
component	FileUploadIcon

GiphyPreviewMessage

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

Type	Default
component	GiphyPreviewMessage

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

LinkPreviewList

Custom component to render link previews in MessageInput.

Type	Default
component	MessageInputFlat

LoadingErrorIndicator

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

Type	Default
component	LoadingErrorIndicator

LoadingIndicator

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

Type	Default
component	LoadingIndicator

Message

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

Type	Default
component	MessageSimple

MessageDeleted

Custom UI component for a deleted message.

Type	Default
component	MessageDeleted

MessageListNotifications

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

Type	Default
component	DefaultMessageListNotifications

MessageNotification

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

Type	Default
component	MessageNotification

MessageOptions

Custom UI component for message options popup.

Type	Default
component	MessageOptions

MessageRepliesCountButton

Custom UI component to display message replies.

Type	Default
component	MessageRepliesCountButton

MessageStatus

Custom UI component to display message delivery status.

Type	Default
component	MessageStatus

MessageSystem

Custom UI component to display system messages.

Type	Default
component	EventComponent

MessageTimestamp

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

Type	Default
component	MessageTimestamp

See also 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

ModalGallery

Custom UI component for viewing message's image attachments.

Type	Default
component	ModalGallery

PinIndicator

Custom UI component to override default pinned message indicator.

Type	Default
component	PinIndicator

QuotedMessage

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

Type	Default
component	QuotedMessage

QuotedMessagePreview

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

Type	Default
component	QuotedMessagePreview

ReactionSelector

Custom UI component to display the reaction selector.

Type	Default
component	ReactionSelector

ReactionsList

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

Type	Default
component	ReactionsList

SendButton

Custom UI component for send button.

Type	Default
component	SendButton

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.

Type	Default
component	ThreadHead

ThreadHeader

Custom UI component to display the header of a Thread.

Type	Default
component	DefaultThreadHeader

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.

Type	Default
component	MessageInputSmall (theme v1) / MessageInputFlat (theme v2)

ThreadStart

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

Type	Default
component	DefaultThreadStart

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

TriggerProvider

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

Type	Default
component	DefaultTriggerProvider

TypingIndicator

Custom UI component for the typing indicator.

Type	Default
component	TypingIndicator

UnreadMessagesNotification

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

Type	Default
component	UnreadMessagesNotification

UnreadMessagesSeparator

Custom UI component inserted before the first message marked unread.

Type	Default
component	UnreadMessagesSeparator

VirtualMessage

Custom UI component to display a message in the VirtualizedMessageList.

Type	Default
component	MessageSimple