Skip to main content

Message

The Message component is a React Context provider that wraps all of the logic, functionality, and UI for the individual messages displayed in a message list. It provides the MessageContext to its children. All of 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 Usage#

The 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 Customization#

The 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.

Props#

Required
message#

The StreamChat message object, which provides necessary data to the underlying UI components.

Type
object

additionalMessageInputProps#

Additional props to be passed to the underlying MessageInput component, available props.

Type
object

closeReactionSelectorOnClick#

If true, picking a reaction from the ReactionSelector component will close the selector.

TypeDefault
booleanfalse

customMessageActions#

An object containing custom message actions (key) and function handlers (value).

const customAction = {  log: (message, event) => console.log(message, event),};
<MessageList customMessageActions={customAction} />;
Type
object

disableQuotedMessages#

If true, disables the ability for users to quote messages.

TypeDefault
booleanfalse

endOfGroup#

When true, the message is the last one in a group sent by a specific user (only used in the VirtualizedMessageList).

Type
boolean

firstOfGroup#

When true, the message is the first one in a group sent by a specific user (only used in the VirtualizedMessageList).

Type
boolean

formatDate#

Overrides the default date formatting logic, has access to the original date object.

Type
(date: Date) => string

getDeleteMessageErrorNotification#

Function 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

getFlagMessageErrorNotification#

Function 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

getFlagMessageSuccessNotification#

Function 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

getMuteUserErrorNotification#

Function 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

getMuteUserSuccessNotification#

Function 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

getPinMessageErrorNotification#

Function 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

groupedByUser#

If true, group messages sent by each user (only used in the VirtualizedMessageList).

TypeDefault
booleanfalse

groupStyles#

An array of potential styles to apply to a grouped message (ex: top, bottom, single).

TypeOptions
string[]'' | 'middle' | 'top' | 'bottom' | 'single'

initialMessage#

When true, signifies the message is the parent message in a thread list.

TypeDefault
booleanfalse

lastReceivedId#

The latest message ID in the current channel.

Type
string

Message#

Custom UI component to display a message.

TypeDefault
componentMessageSimple for MessageList
FixedHeightMessage for VirtualizedMessageList

messageActions#

Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.

TypeDefault
array['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']

messageListRect#

DOMRect object linked to the parent MessageList component.

Type
DOMRect

onlySenderCanEdit#

If true, only the sender of the message has editing privileges.

TypeDefault
booleanfalse

onMentionsClick#

Custom action handler function to run on click of an @mention in a message.

TypeDefault
functionChannelActionContextValue['onMentionsClick']

onMentionsHover#

Custom action handler function to run on hover of an @mention in a message.

TypeDefault
functionChannelActionContextValue['onMentionsHover']

onUserClick#

Custom action handler function to run on click of user avatar.

Type
(event: React.BaseSyntheticEvent, user: User) => void

onUserHover#

Custom action handler function to run on hover of user avatar.

Type
(event: React.BaseSyntheticEvent, user: User) => void

openThread#

Custom action handler to open a Thread component.

TypeDefault
functionChannelActionContextValue['openThread']

pinPermissions#

The user roles allowed to pin messages in various channel types (deprecated in favor of channelCapabilities).

TypeDefault
objectdefaultPinPermissions

readBy#

An array of users that have read the current message.

Type
array

renderText#

Custom function to render message text content.

TypeDefault
functionrenderText

retrySendMessage#

Custom action handler to retry sending a message after a failed request.

TypeDefault
functionChannelActionContextValue['retrySendMessage']

threadList#

If true, indicates that the current MessageList component is part of a Thread.

TypeDefault
booleanfalse

unsafeHTML#

If true, renders HTML instead of markdown. Posting HTML is only supported server-side.

TypeDefault
booleanfalse

Did you find this page helpful?