id	title
ui-components	UI Components

import GHComponentLink from '../../_docusaurus-components/GHComponentLink';

As described in the Message UI section, our default component is a combination of various UI subcomponents. We export all 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 - displays the available actions on a message (ex: edit, flag, pin)
MessageDeleted - renders when message.type is deleted
MessageOptions - on hover, shows the available options on a message (i.e., react, reply, actions)
MessageRepliesCountButton - displays the number of threaded replies on a message
MessageStatus - displays message delivery status and the users who have read the message
MessageText - formats and renders the message text in markdown using react-markdown
MessageTimestamp - shows the sent time of a message
MML - a wrapper component around the MML React library
QuotedMessage - shows a quoted message UI wrapper when the sent message quotes a previous message
Timestamp - formats and displays a date, used by MessageTimestamp and for edited message timestamps.
MessageBouncePrompt - presents options to deal with a message that got bounced by the moderation rules.

Besides the above there are also components that render reaction list and reaction selector. You can find more about them in dedicated chapter.

MessageActions Props

ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

Type	Default
`React.ComponentType`

customWrapperClass

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

Type
string

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

handleMarkUnread

Function that marks the message and all the following messages as unread in a channel.

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

inline

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

Type	Default
string	false

message

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

Type
object

messageWrapperRef

React mutable ref placed on the message root div. It is forwarded by MessageOptions down to MessageActions (see the example).

Type
React.RefObject<HTMLDivElement>

mine

Function that returns whether 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

ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

Type	Default
`React.ComponentType`

displayReplies

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

Type	Default
boolean	true

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 that can be placed on the message root div. MessageOptions component forwards this prop to MessageActions component (see the example).

Type
React.RefObject<HTMLDivElement>

ReactionIcon

Custom component rendering the icon used in a message options button invoking reactions selector for a given message.

Type	Default
`React.ComponentType`

theme

Theme string to be added to CSS class names.

<div className={`str-chat__message-${theme}__actions`} />

Type	Default
string	'simple'

ThreadIcon

Custom component rendering the icon used in a message options button opening thread.

Type	Default
`React.ComponentType`

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
React.MouseEventHandler

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

Type	Default
component

messageType

Message type string to be added to CSS class names.

<span className={`str-chat__message-${messageType}-status`} />

Type	Default
string	'simple'

tooltipUserNameMapper

Allows to customize the username(s) that appear on the message status tooltip.

| Type | Default | | ------------------------------ | ------------------- | --- | ------- | | (user: UserResponse) => string | (user) => user.name | | user.id |

This prop's implementation is not provided out of the box by the SDK. See below for a customization example:

const CustomMessageStatus = (props: MessageStatusProps) => {
  const allCapsUserName = useCallback<TooltipUsernameMapper>(
    (user) => (user.name || user.id).toUpperCase(),
    [],
  );
  return <MessageStatus {...props} tooltipUserNameMapper={allCapsUserName} />;
};

// Sort in reverse order to avoid auto-selecting unread channel
const sort: ChannelSort = { last_updated: 1 };
const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
  <ConnectedUser token={token} userId={userId}>
    <ChannelList filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }} sort={sort} />
    <Channel MessageStatus={CustomMessageStatus}>
      <Window>
        <ChannelHeader />
        <MessageList />
      </Window>
      <Thread />
    </Channel>
  </ConnectedUser>
);

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`} />

Type	Default
string	'simple'

MessageTimestamp Props

This component has all of the same props as the underlying Timestamp, except that instead of timestamp it uses message.created_at value from the MessageContext.

calendar

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

Type	Default
boolean	false

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.

Type	Default
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.

Type	Default
'left' \| 'right'	'right'

QuotedMessage Props

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

MessageBouncePrompt props

This component is rendered in a modal dialog for messages that got bounced by the moderation rules.

MessageBouncePrompt children

Type	Default
ReactNode	Localized string for "This message did not meet our content guidelines"

Use this prop to easily override the text displayed in the modal dialog for the bounced messages, without fully implementing a custom MessageBouncePrompt component:

import { MessageBouncePrompt } from 'stream-react-chat';

function MyCustomMessageBouncePrompt(props) {
  return <MessageBouncePrompt {...props}>My custom text</MessageBouncePrompt>;
}

Then override the default MessageBouncePrompt component with your custom one:

<Channel MessageBouncePrompt={MyCustomMessageBouncePrompt}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

If you need deeper customization, refer to the MessageBounceContext documentation.

onClose

The Message UI component will pass this callback to close the modal dialog MessageBouncePrompt are rendered in.

Type
ReactEventHandler

Timestamp props

calendar

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

Type	Default
boolean	false

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.

Type	Default
string	'h:mmA'

timestamp

Either an ISO string with a date, or a Date object with a date to display.

Type
Date \| string

Files

ui-components.mdx

Latest commit

History

ui-components.mdx

File metadata and controls

MessageActions Props

ActionsIcon

customWrapperClass

getMessageActions

handleDelete

handleFlag

handleMarkUnread

handleMute

handlePin

inline

message

messageWrapperRef

mine

MessageDeleted Props

Required message

MessageOptions Props

ActionsIcon

displayReplies

handleOpenThread

messageWrapperRef

ReactionIcon

theme

ThreadIcon

MessageRepliesCountButton Props

labelPlural

labelSingle

onClick

reply_count

MessageStatus Props

Avatar

messageType

tooltipUserNameMapper

MessageText Props

customInnerClass

customWrapperClass

message

theme

MessageTimestamp Props

calendar

customClass

format

message

MML Props

Required source

actionHandler

align

QuotedMessage Props

MessageBouncePrompt props

MessageBouncePrompt children

onClose

Timestamp props

calendar

customClass

format

timestamp

Required
message

Required
source