Message
The Message
component is a React Context provider that wraps all the logic, functionality, and UI for the individual messages
displayed in a message list. It provides the MessageContext
to its children. All the message UI components consume the MessageContext
and rely on the stored data for their display and interaction.
note
The majority of Stream Chat use cases will not need to use the Message
component directly. We've documented it here for reference,
but it's primarily used internally to build up the MessageContext
. A custom message UI component, added onto Channel
or
MessageList
via the Message
prop, will consume this context, so Message
likely doesn't need to be imported into your app.
#
Basic UsageThe Message
component is used internally as part of the logic of the MessageList
. The MessageList
renders a list of
messages and passes each individual message
object into a Message
component. Since the component is used internally by
default, it only needs to be explicitly imported from the library and used in unique use cases.
#
UI CustomizationThe Message
component does not inject any UI, so all message customization is handled by the Message UI
component. The Message UI component is passed as the Message
prop into either the Channel
or MessageList
component.
#
PropsRequired message#
The StreamChat
message object, which provides necessary data to the underlying UI components.
Type |
---|
object |
#
additionalMessageInputPropsAdditional props to be passed to the underlying MessageInput
component, available props. It is rendered when editing a message.
Type |
---|
object |
#
autoscrollToBottomCall this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the VirtualizedMessageList
). An example use case is that upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the autoscrollToBottom
function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom. The function is provided by the SDK and is not inteded for customization.
Type |
---|
() => void |
#
closeReactionSelectorOnClickIf true, picking a reaction from the ReactionSelector
component will close the selector.
Type | Default |
---|---|
boolean | false |
#
customMessageActionsAn object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in MessageActionsBox
is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
const customActions = {
'Copy text': (message) => {
navigator.clipboard.writeText(message.text || '')
},
};
<MessageList customMessageActions={customActions} />;
Custom action item "Copy text" in the message actions box:

const customActions = {
'Copy text': (message) => {
navigator.clipboard.writeText(message.text || '')
},
};
<MessageList customMessageActions={customActions} />;
Custom action item "Copy text" in the message actions box:

Type |
---|
object |
#
disableQuotedMessagesIf true, disables the ability for users to quote messages.
Type | Default |
---|---|
boolean | false |
#
endOfGroupWhen true, the message is the last one in a group sent by a specific user (only used in the VirtualizedMessageList
).
Type |
---|
boolean |
#
firstOfGroupWhen true, the message is the first one in a group sent by a specific user (only used in the VirtualizedMessageList
).
Type |
---|
boolean |
#
formatDateOverrides the default date formatting logic, has access to the original date object.
Type |
---|
(date: Date) => string |
#
getDeleteMessageErrorNotificationFunction that returns the notification text to be displayed when a delete message request fails. This function receives the deleted message object as its argument.
Type |
---|
(message: StreamMessage) => string |
#
getFlagMessageErrorNotificationFunction that returns the notification text to be displayed when a flag message request fails. This function receives the flagged message object as its argument.
Type |
---|
(message: StreamMessage) => string |
#
getFlagMessageSuccessNotificationFunction that returns the notification text to be displayed when a flag message request succeeds. This function receives the flagged message object as its argument.
Type |
---|
(message: StreamMessage) => string |
#
getMuteUserErrorNotificationFunction that returns the notification text to be displayed when a mute user request fails. This function receives the muted user object as its argument.
Type |
---|
(user: UserResponse) => string |
#
getMuteUserSuccessNotificationFunction that returns the notification text to be displayed when a mute user request succeeds. This function receives the muted user object as its argument.
Type |
---|
(user: UserResponse) => string |
#
getPinMessageErrorNotificationFunction that returns the notification text to be displayed when a pin message request fails. This function receives the pinned message object as its argument.
Type |
---|
(message: StreamMessage) => string |
#
groupedByUserIf true, group messages sent by each user (only used in the VirtualizedMessageList
).
Type | Default |
---|---|
boolean | false |
#
groupStylesAn array of potential styles to apply to a grouped message (ex: top, bottom, single).
Type | Options |
---|---|
string[] | '' | 'middle' | 'top' | 'bottom' | 'single' |
#
highlightedWhether to highlight and focus the message on load. Used internally in the process of jumping to a message.
Type |
---|
boolean |
#
initialMessageWhen true, signifies the message is the parent message in a thread list.
Type | Default |
---|---|
boolean | false |
#
lastReceivedIdThe latest message ID in the current channel.
Type |
---|
string |
#
MessageCustom UI component to display a message.
Type | Default |
---|---|
component | MessageSimple |
#
messageActionsArray of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.
Type | Default |
---|---|
array | ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'] |
#
messageListRectDOMRect object linked to the parent wrapper div around the InfiniteScroll
component.
Type |
---|
DOMRect |
#
onlySenderCanEditIf true, only the sender of the message has editing privileges. If false
also channel capability update-any-message
has to be enabled in order a user can edit other users' messages.
Type | Default |
---|---|
boolean | false |
#
onMentionsClickCustom action handler function to run on click of a @mention in a message.
Type | Default |
---|---|
function | ChannelActionContextValue['onMentionsClick'] |
#
onMentionsHoverCustom action handler function to run on hover over a @mention in a message.
Type | Default |
---|---|
function | ChannelActionContextValue['onMentionsHover'] |
#
onUserClickCustom action handler function to run on click of user avatar.
Type |
---|
(event: React.BaseSyntheticEvent, user: User) => void |
#
onUserHoverCustom action handler function to run on hover of user avatar.
Type |
---|
(event: React.BaseSyntheticEvent, user: User) => void |
#
openThreadCustom action handler to open a Thread
component.
Type | Default |
---|---|
function | ChannelActionContextValue['openThread'] |
#
pinPermissionsThe user roles allowed to pin messages in various channel types (deprecated in favor of channelCapabilities
).
Type | Default |
---|---|
object | defaultPinPermissions |
#
readByAn array of users that have read the current message.
Type |
---|
array |
#
renderTextCustom function to render message text content.
Type | Default |
---|---|
function | renderText |
#
retrySendMessageCustom action handler to retry sending a message after a failed request.
Type | Default |
---|---|
function | ChannelActionContextValue['retrySendMessage'] |
#
threadListIf true, indicates that the current MessageList
component is part of a Thread
.
Type | Default |
---|---|
boolean | false |
#
unsafeHTMLIf true, renders HTML instead of markdown. Posting HTML is only supported server-side.
Type | Default |
---|---|
boolean | false |