UI Components
As described in the Message UI section, our default MessageSimple
component is a combination of various UI sub-components. 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 whenmessage.type
isdeleted
MessageOptions
- on hover, shows the available options on a message (i.e., react, reply, actions)MessageRepliesCountButton
- displays the number of threaded replies on a messageMessageStatus
- displays message delivery status and the users who have read the messageMessageText
- formats and renders the message text in markdown using react-markdownMessageTimestamp
- shows the sent time of a messageQuotedMessage
- shows a quoted message UI wrapper when the sent message quotes a previous message
#
MessageActions Props#
getMessageActionsFunction that returns an array of the allowed actions on a message by the currently connected user (overrides the value from MessageContext
).
Type |
---|
() => MessageActionsArray |
#
handleDeleteFunction that removes a message from the current channel (overrides the value from MessageContext
).
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
handleFlagFunction that flags a message (overrides the value from MessageContext
).
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
handleMuteFunction that mutes the sender of a message (overrides the value from MessageContext
).
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
handlePinFunction that pins a message in the current channel (overrides the value from MessageContext
).
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
messageThe StreamChat
message object, which provides necessary data to the underlying UI components (overrides the value from MessageContext
).
Type |
---|
object |
#
customWrapperClassCustom CSS class to be added to the div
wrapping the component.
Type |
---|
string |
#
inlineIf true, renders the wrapper component as a span
, not a div
.
Type | Default |
---|---|
string | false |
#
messageWrapperRefReact mutable ref placed on the message root div
. It is forwarded by MessageOptions
down to MessageActions
(see the example).
Type |
---|
React.RefObject<HTMLDivElement> |
#
mineFunction that returns whether or not the message was sent by the connected user.
Type |
---|
() => boolean |
#
MessageDeleted PropsRequired message#
The StreamChat
message object, which provides necessary data to the underlying UI components.
Type |
---|
object |
#
MessageOptions Props#
displayLeftIf true, sets the MessageOptions
component to the left of the connected user's messages.
Type | Default |
---|---|
boolean | true |
#
displayRepliesIf true, show the ThreadIcon
and enable navigation into a Thread
component.
Type | Default |
---|---|
boolean | true |
#
handleOpenThreadFunction that opens a Thread
on a message (overrides the value from MessageContext
).
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
messageWrapperRefReact 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> |
#
themeTheme string to be added to CSS class names.
<div className={`str-chat__message-${theme}__actions`} />
Type | Default |
---|---|
string | 'simple' |
#
MessageRepliesCountButton Props#
labelPluralIf supplied, adds custom text to the end of a multiple replies message.
const pluralReplyText = `${reply_count} ${labelPlural}`;
Type |
---|
string |
#
labelSingleIf supplied, adds custom text to the end of a single reply message.
const singleReplyText = `1 ${labelSingle}`;
Type |
---|
string |
#
onClickFunction to navigate into an existing thread on a message.
Type |
---|
(event: React.BaseSyntheticEvent) => Promise<void> | void |
#
reply_countThe amount of replies (i.e., threaded messages) on a message.
Type |
---|
number |
#
MessageStatus Props#
AvatarCustom UI component to display a user's avatar (overrides the value from ComponentContext
).
Type | Default |
---|---|
component | Avatar |
#
messageTypeMessage type string to be added to CSS class names.
<span className={`str-chat__message-${messageType}-status`} />
Type | Default |
---|---|
string | 'simple' |
#
tooltipUserNameMapperAllows you to customize the username(s) that appear on the message status tooltip.
Type | Default |
---|---|
(user: UserResponse) => string | (user) => user.name |
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#
customInnerClassIf provided, replaces the CSS class name placed on the component's inner div
container.
Type |
---|
string |
#
customWrapperClassIf provided, adds a CSS class name to the component's outer div
container.
Type |
---|
string |
#
messageThe StreamChat
message object, which provides necessary data to the underlying UI components (overrides the value stored in MessageContext
).
Type |
---|
object |
#
themeTheme string to be added to CSS class names.
<div className={`str-chat__message-${theme}-text-inner`} />
Type | Default |
---|---|
string | 'simple' |
#
MessageTimestamp Props#
calendarIf true, call the Day.js
calendar function to get the date string to display.
Type | Default |
---|---|
boolean | false |
#
customClassIf provided, adds a CSS class name to the component's outer time
container.
<time className={customClass} />
Type |
---|
string |
#
formatIf provided, overrides the default timestamp format.
Type | Default |
---|---|
string | 'h:mmA' |
#
messageThe StreamChat
message object, which provides necessary data to the underlying UI components (overrides the value from MessageContext
).
Type |
---|
object |
#
MML PropsRequired source#
The MML source string to be rendered by the mml-react
library.
Type |
---|
string |
#
actionHandlerThe submit handler function for MML actions.
Type |
---|
(data: Record<string, unknown>) => unknown |
#
alignThe side of the message list to render MML components.
Type | Default |
---|---|
'left' | 'right' | 'right' |
#
QuotedMessage Propsnote
QuotedMessage
only consumes context and does not accept any optional props.