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 UsageAs 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#
additionalMessageInputPropsAdditional props to be passed to the underlying MessageInput
component, available props.
Type |
---|
object |
#
closeReactionSelectorOnClickIf true, picking a reaction from the ReactionSelector
component will close the selector.
Type | Default |
---|---|
boolean | false |
#
customMessageActionsAn object containing custom message actions (key) and function handlers (value).
const customAction = {
log: (message, event) => console.log(message, event),
};
<MessageList customMessageActions={customAction} />;
Type |
---|
object |
#
disableDateSeparatorIf true, disables the injection of date separator UI components in the Channel
MessageList
component.
Type | Default |
---|---|
boolean | false |
#
disableQuotedMessagesIf true, disables the ability for users to quote messages.
Type | Default |
---|---|
boolean | false |
#
formatDateOverrides the default date formatting logic, has access to the original date object.
Type |
---|
(date: Date) => string |
#
getDeleteMessageErrorNotificationFunction 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 |
#
getFlagMessageErrorNotificationFunction 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 |
#
getFlagMessageSuccessNotificationFunction 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 |
#
getMuteUserErrorNotificationFunction 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 |
#
getMuteUserSuccessNotificationFunction 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 |
#
getPinMessageErrorNotificationFunction 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 |
#
groupStylesCallback function to set group styles for each message.
Type |
---|
(message: StreamMessage, previousMessage: StreamMessage, nextMessage: StreamMessage, noGroupByUser: boolean) => GroupStyle |
#
hasMoreWhether or not the list has more items to load.
Type | Default |
---|---|
boolean | ChannelStateContextValue['hasMore'] |
#
headerPositionPosition to render the HeaderComponent
in the list.
Type |
---|
number |
#
hideDeletedMessagesIf true, removes the MessageDeleted
components from the list.
Type | Default |
---|---|
boolean | false |
#
hideNewMessageSeparatorIf true, hides the DateSeparator
component that renders when new messages are received in a channel that's watched but not active.
Type | Default |
---|---|
boolean | false |
#
internalInfiniteScrollPropsAdditional props for the underlying InfiniteScroll component.
Type |
---|
object |
#
loadingMoreWhether or not the list is currently loading more items.
Type | Default |
---|---|
boolean | ChannelStateContextValue['loadingMore'] |
#
loadMoreFunction called when more messages are to be loaded, provide your own function to override the handler stored in context.
Type | Default |
---|---|
function | ChannelActionContextValue['loadMore'] |
#
MessageCustom UI component to display an individual message.
Type | Default |
---|---|
component | MessageSimple |
#
messageActionsArray of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.
Type | Default |
---|---|
array | ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'] |
#
messageLimitThe limit to use when paginating new messages.
Type | Default |
---|---|
number | 100 |
#
messagesThe messages to render in the list, provide your own array to override the data stored in context.
Type | Default |
---|---|
array | ChannelStateContextValue['messages'] |
#
noGroupByUserIf true, turns off message UI grouping by user.
Type | Default |
---|---|
boolean | false |
#
onlySenderCanEditIf true, only the sender of the message has editing privileges.
Type | Default |
---|---|
boolean | false |
#
onMentionsClickCustom action handler function to run on click of an @mention in a message.
Type | Default |
---|---|
function | ChannelActionContextValue['onMentionsClick'] |
#
onMentionsHoverCustom action handler function to run on hover of an @mention in a message.
Type | Default |
---|---|
function | ChannelActionContextValue['onMentionsHover'] |
#
onUserClickCustom action handler function to run on click of user avatar.
Type |
---|
(event: React.BaseSyntheticEvent, user: User) => void |
#
onUserHoverCustom action handler function to run on hover of user avatar.
Type |
---|
(event: React.BaseSyntheticEvent, user: User) => void |
#
openThreadCustom action handler to open a Thread
component.
Type | Default |
---|---|
function | ChannelActionContextValue['openThread'] |
#
pinPermissionsThe user roles allowed to pin messages in various channel types (deprecated in favor of channelCapabilities
).
Type | Default |
---|---|
object | defaultPinPermissions |
#
renderTextCustom function to render message text content.
Type | Default |
---|---|
function | renderText |
#
retrySendMessageCustom action handler to retry sending a message after a failed request.
Type | Default |
---|---|
function | ChannelActionContextValue['retrySendMessage'] |
#
returnAllReadDataIf 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.
Type | Default |
---|---|
boolean | false |
#
scrolledUpThresholdThe 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.
Type | Default |
---|---|
number | 200 |
#
threadListIf true, indicates that the current MessageList
component is part of a Thread
.
Type | Default |
---|---|
boolean | false |
#
unsafeHTMLIf true, renders HTML instead of markdown. Posting HTML is only supported server-side.
Type | Default |
---|---|
boolean | false |