Skip to main content

UI Components

As described in the Message UI section, our default MessageSimple component is a combination of various UI sub-components. We export all of the building blocks of MessageSimple, so a custom Message UI component can be built in a similar way. Check out the Message UI Customization section for an example.

The following UI components are available for use:

MessageActions Props#

getMessageActions#

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

Type
() => MessageActionsArray

handleDelete#

Function that removes a message from the current channel (overrides the value from MessageContext).

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

handleFlag#

Function that flags a message (overrides the value from MessageContext).

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

handleMute#

Function that mutes the sender of a message (overrides the value from MessageContext).

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

handlePin#

Function that pins a message in the current channel (overrides the value from MessageContext).

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

message#

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

Type
object

customWrapperClass#

Custom CSS class to be added to the div wrapping the component.

Type
string

inline#

If true, renders the wrapper component as a span, not a div.

TypeDefault
stringfalse

messageWrapperRef#

React mutable ref placed on the div wrapping the MessageSimple children.

Type
React.RefObject<HTMLDivElement>

mine#

Function that returns whether or not the message was sent by the connected user.

Type
() => boolean

MessageDeleted Props#

Required
message#

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

Type
object

MessageOptions Props#

displayLeft#

If true, sets the MessageOptions component to the left of the connected user's messages.

TypeDefault
booleantrue

displayReplies#

If true, show the ThreadIcon and enable navigation into a Thread component.

TypeDefault
booleantrue

handleOpenThread#

Function that opens a Thread on a message (overrides the value from MessageContext).

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

messageWrapperRef#

React mutable ref placed on the div wrapping the MessageSimple children.

Type
React.RefObject<HTMLDivElement>

theme#

Theme string to be added to CSS class names.

<div className={`str-chat__message-${theme}__actions`} />
TypeDefault
string'simple'

MessageRepliesCountButton Props#

labelPlural#

If supplied, adds custom text to the end of a multiple replies message.

const pluralReplyText = `${reply_count} ${labelPlural}`;
Type
string

labelSingle#

If supplied, adds custom text to the end of a single reply message.

const singleReplyText = `1 ${labelSingle}`;
Type
string

onClick#

Function to navigate into an existing thread on a message.

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

reply_count#

The amount of replies (i.e., threaded messages) on a message.

Type
number

MessageStatus Props#

Avatar#

Custom UI component to display a user's avatar (overrides the value from ComponentContext).

TypeDefault
componentAvatar

messageType#

Message type string to be added to CSS class names.

<span className={`str-chat__message-${messageType}-status`} />
TypeDefault
string'simple'

MessageText Props#

customInnerClass#

If provided, replaces the CSS class name placed on the component's inner div container.

Type
string

customWrapperClass#

If provided, adds a CSS class name to the component's outer div container.

Type
string

message#

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

Type
object

theme#

Theme string to be added to CSS class names.

<div className={`str-chat__message-${theme}-text-inner`} />
TypeDefault
string'simple'

MessageTimestamp Props#

calendar#

If true, call the Day.js calendar function to get the date string to display.

TypeDefault
booleanfalse

customClass#

If provided, adds a CSS class name to the component's outer time container.

<time className={customClass} />
Type
string

format#

If provided, overrides the default timestamp format.

TypeDefault
string'h:mmA'

message#

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

Type
object

MML Props#

Required
source#

The MML source string to be rendered by the mml-react library.

Type
string

actionHandler#

The submit handler function for MML actions.

Type
(data: Record<string, unknown>) => unknown

align#

The side of the message list to render MML components.

TypeDefault
'left' | 'right''right'

QuotedMessage Props#

note

QuotedMessage only consumes context and does not accept any optional props.

Did you find this page helpful?