Skip to main content

ComponentContext

The ComponentContext is a one of the context providers exposed by the Channel component and is consumable by all of 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

Avatar#

Custom UI component to display user's avatar.

TypeDefault
componentAvatar

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

CooldownTimer#

Custom UI component to display the slow mode cooldown timer.

TypeDefault
componentCooldownTimer

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

Input#

Custom UI component handling how the message input is rendered.

TypeDefault
componentMessageInputFlat

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

HeaderComponent#

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

TypeDefault
componentnone

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

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

ThreadHeader#

Custom UI component to display the header of a Thread.

TypeDefault
componentDefaultThreadHeader

ThreadInput#

Custom UI component to replace the MessageInputof a Thread. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------ | | component | DefaultThreadInput |

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

VirtualMessage#

Custom UI component to display a message in the VirtualizedMessageList.

TypeDefault
componentFixedHeightMessage

Did you find this page helpful?