Skip to main content

Message UI

The Message UI component consumes the MessageContext and handles the display and functionality for an individual message in a message list. The Message UI component is typically a combination of sub-components that each consume context and are responsible for one aspect of a message (ex: text or reactions).

Each message list component renders with a default Message UI component. If you don't supply a custom component, the following defaults will load in their respective lists:

List ComponentDefault Message UI
MessageListMessageSimple
VirtualizedMessageListFixedHeightMessage

Basic Usage#

Example 1 - Add Message UI component to MessageList.

To use your own Message UI component in the standard MessageList, utilize the Message prop on either the Channel or MessageList component. Adding the prop to Channel will inject your component into the ComponentContext and adding to MessageList will override any value stored in context. So if both props are added, the value delivered to MessageList will take precedence.

const CustomMessage = () => {  // consume `MessageContext` and render custom component here};
<Chat client={client}>  <Channel channel={channel} Message={CustomMessage}>    <MessageList />    <MessageInput />  </Channel></Chat>;

Example 2 - Add Message UI component to VirtualizedMessageList.

To use your own Message UI component in the VirtualizedMessageList, utilize either the VirtualMessage prop on Channel or the Message prop on VirtualizedMessageList. Adding the prop to Channel will inject your component into the ComponentContext and adding to VirtualizedMessageList will override any value stored in context. So if both props are added, the value delivered to VirtualizedMessageList will take precedence.

const CustomMessage = () => {  // consume `MessageContext` and render custom component here};
<Chat client={client}>  <Channel channel={channel} VirtualMessage={CustomMessage}>    <VirtualizedMessageList />    <MessageInput />  </Channel></Chat>;

UI Customization#

MessageSimple and FixedHeightMessage are both designed to be guides to help build a custom Message UI component. At a high level, these pre-built, default components wrap a subset of composable components that each serve specific logic and design-based purposes.

For example, if we strip MessageSimple down to its core pieces, the component return resembles the following snippet:

<div>  <MessageStatus />  <Avatar />  <div>    <MessageOptions />    <ReactionsList />    <ReactionSelector />  </div>  <Attachment />  <MessageText />  <MML />  <MessageRepliesCountButton />  <MessageTimestamp /></div>

We recommend building a Message UI component in a similar way. You can mix and match any of the UI sub-components and arrange in a layout that meets your design specifications. All of these UI sub-components are exported by the library and may be used within your custom Message UI component. Each sub-component consumes the MessageContext and requires no/minimal props to run.

For a detailed example, review the Message UI Customization example.

Props#

note

All Message UI props are optional overrides of the values stored in the MessageContext. As you build your own custom component, we recommend pulling the necessary data from context using the useMessageContext custom hook. However, if you choose to develop upon our pre-built, default MessageSimple component, you may encounter a situation where you wish to override a single prop, so all options are detailed below.

actionsEnabled#

If true, actions such as edit, delete, flag, etc. are enabled on the message (overrides the value stored in MessageContext).

TypeDefault
booleantrue

additionalMessageInputProps#

Additional props to be passed to the underlying MessageInput component that's rendered while editing (overrides the value stored in MessageContext).

Type
object

clearEditingState#

When called, this function will exit the editing state on the message (overrides the function stored in MessageContext).

Type
(event?: React.BaseSyntheticEvent) => void

customMessageActions#

An object containing custom message actions (key) and function handlers (value) (overrides the value stored in MessageContext).

Type
object

editing#

If true, the message toggles to an editing state (overrides the value stored in MessageContext).

TypeDefault
booleanfalse

formatDate#

Overrides the default date formatting logic, has access to the original date object (overrides the function stored in MessageContext).

Type
(date: Date) => string

getMessageActions#

Function that returns an array of the allowed actions on a message by the currently connected user (overrides the function stored in MessageContext).

Type
() => MessageActionsArray

groupByUser#

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) (overrides the value stored in MessageContext).

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

handleAction#

Function that calls an action on a message (overrides the function stored in MessageContext).

TypeDefault
(dataOrName?: string | FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise<void>MessageContextValue['handleAction']

handleDelete#

Function that removes a message from the current channel (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleDelete']

handleEdit#

Function that edits a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleEdit']

handleFlag#

Function that flags a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleFlag']

handleMute#

Function that mutes the sender of a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleMute']

handleOpenThread#

Function that opens a Thread on a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleOpenThread']

handlePin#

Function that pins a message in the current channel (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handlePin']

handleReaction#

Function that adds a reaction on a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['handleReaction']

handleRetry#

Function that retries sending a message after a failed request (overrides the function stored in ChannelActionContext).

TypeDefault
(message: StreamMessage) => Promise<void>ChannelActionContextValue['retrySendMessage']

initialMessage#

When true, signifies the message is the parent message in a thread list (overrides the value stored in MessageContext).

TypeDefault
booleanfalse

isMyMessage#

Function that returns whether or not a message belongs to the current user (overrides the function stored in MessageContext).

Type
() => boolean

isReactionEnabled#

If true, reactions are enabled in the currently active channel (overrides the value stored in MessageContext).

TypeDefault
booleantrue

lastReceivedId#

The latest message ID in the current channel (overrides the value stored in MessageContext).

Type
string

message#

The StreamChat message object, which provides necessary data to the underlying UI components (overrides the value stored in MessageContext).

Type
object

messageListRect#

DOMRect object linked to the parent MessageList component (overrides the value stored in MessageContext).

Type
DOMRect

mutes#

An array of users that have been muted by the connected user (overrides the value stored in MessageContext).

TypeDefault
Mute[]ChannelStateContext['mutes']

onMentionsClickMessage#

Function that runs on click of an @mention in a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onMentionsClickMessage']

onMentionsHoverMessage#

Function that runs on hover of an @mention in a message (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onMentionsHoverMessage']

onReactionListClick#

Function that runs on click of the reactions list component (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onReactionListClick']

onUserClick#

Function that runs on click of a user avatar (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onUserClick']

onUserHover#

Function that runs on hover of a user avatar (overrides the function stored in MessageContext).

TypeDefault
(event: React.BaseSyntheticEvent) => Promise<void> | voidMessageContextValue['onUserHover']

pinPermissions#

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

TypeDefault
objectdefaultPinPermissions

reactionSelectorRef#

Ref to be placed on the reaction selector component (overrides the ref stored in MessageContext).

Type
React.MutableRefObject<HTMLDivElement>

readBy#

An array of users that have read the current message (overrides the value stored in MessageContext).

Type
array

renderText#

Custom function to render message text content (overrides the function stored in MessageContext).

TypeDefault
functionrenderText

setEditingState#

Function to toggle the editing state on a message (overrides the function stored in MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

showDetailedReactions#

When true, show the reactions list component (overrides the value stored in MessageContext).

Type
boolean

threadList#

If true, indicates that the current MessageList component is part of a Thread (overrides the value stored in MessageContext).

TypeDefault
booleanfalse

unsafeHTML#

If true, renders HTML instead of markdown. Posting HTML is only supported server-side (overrides the value stored in MessageContext).

TypeDefault
booleanfalse

Did you find this page helpful?