const { Attachment, Avatar, Message } = useComponentContext();
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:
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 |
- Basic Usage
- Values
- Attachment
- AttachmentPreviewList
- AutocompleteSuggestionHeader
- AutocompleteSuggestionItem
- AutocompleteSuggestionList
- Avatar
- BaseImage
- CooldownTimer
- CustomMessageActionsList
- DateSeparator
- EditMessageInput
- EmojiIcon
- EmptyStateIndicator
- FileUploadIcon
- GiphyPreviewMessage
- HeaderComponent
- Input
- LinkPreviewList
- LoadingErrorIndicator
- LoadingIndicator
- Message
- MessageDeleted
- MessageListNotifications
- MessageNotification
- MessageOptions
- MessageRepliesCountButton
- MessageStatus
- MessageSystem
- MessageTimestamp
- MessageBouncePrompt
- ModalGallery
- PinIndicator
- QuotedMessage
- QuotedMessagePreview
- ReactionSelector
- ReactionsList
- SendButton
- ThreadHead
- ThreadHeader
- ThreadInput
- ThreadStart
- Timestamp
- TriggerProvider
- TypingIndicator
- UnreadMessagesNotification
- UnreadMessagesSeparator
- VirtualMessage