Skip to main content

MessageList

The MessageList component renders a scrollable list of messages. The UI for each individual message is rendered conditionally based on its message.type value. The list renders date separators, new message notifications, system messages, deleted messages, and standard messages containing text and/or attachments.

By default, the MessageList loads the most recent 25 messages held in the channel.state. More messages are fetched from the Stream Chat API and loaded into the DOM on scrolling up the list. The currently loaded messages are held in the ChannelStateContext and can be referenced with our custom hook.

const { messages } = useChannelStateContext();

The MessageList has no required props and by default pulls overridable data from the various contexts established in the Channel component. Customization of the messages rendered within the list is handled by the Message UI component.

Basic Usage#

As a context consumer, the MessageList component must be rendered as a child of the Channel component. It can be rendered with or without a provided messages prop. Providing your own messages value will override the default value drawn from the ChannelStateContext.

Example 1 - without messages prop

<Chat client={client}>
<ChannelList />
<Channel>
<MessageList />
<MessageInput />
</Channel>
</Chat>

Example 2 - with messages prop

const customMessages = [
// array of messages
];

<Chat client={client}>
<ChannelList />
<Channel>
<MessageList messages={customMessages} />
<MessageInput />
</Channel>
</Chat>;

Props#

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

disableDateSeparator#

If true, disables the injection of date separator UI components in the Channel MessageList component.

TypeDefault
booleanfalse

disableQuotedMessages#

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

TypeDefault
booleanfalse

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

groupStyles#

Callback function to set group styles for each message.

Type
(message: StreamMessage, previousMessage: StreamMessage, nextMessage: StreamMessage, noGroupByUser: boolean) => GroupStyle

hasMore#

Whether or not the list has more items to load.

TypeDefault
booleanChannelStateContextValue['hasMore']

headerPosition#

Position to render the HeaderComponent in the list.

Type
number

hideDeletedMessages#

If true, removes the MessageDeleted components from the list.

TypeDefault
booleanfalse

hideNewMessageSeparator#

If true, hides the DateSeparator component that renders when new messages are received in a channel that's watched but not active.

TypeDefault
booleanfalse

internalInfiniteScrollProps#

Additional props for the underlying InfiniteScroll component.

Type
object

loadingMore#

Whether or not the list is currently loading more items.

TypeDefault
booleanChannelStateContextValue['loadingMore']

loadMore#

Function called when more messages are to be loaded, provide your own function to override the handler stored in context.

TypeDefault
functionChannelActionContextValue['loadMore']

Message#

Custom UI component to display an individual message.

TypeDefault
componentMessageSimple

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']

messageLimit#

The limit to use when paginating new messages.

TypeDefault
number100

messages#

The messages to render in the list, provide your own array to override the data stored in context.

TypeDefault
arrayChannelStateContextValue['messages']

noGroupByUser#

If true, turns off message UI grouping by user.

TypeDefault
booleanfalse

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

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']

returnAllReadData#

If true, readBy data supplied to the Message components will include all user read states per sent message. By default, only readBy data for a user's most recently sent message is returned.

TypeDefault
booleanfalse

scrolledUpThreshold#

The pixel threshold to determine whether or not the user is scrolled up in the list. When scrolled up in the active channel, the MessageNotification component displays when new messages arrive.

TypeDefault
number200

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?