Message List for PubNub Chat Components for React
Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.
Fetches historical messages using the scrolling pagination pattern, subscribes to the current channel to stay up to date with new messages, and displays the following in an interactive list:
- User names
- Avatars
- Time the message was sent
- Attachments (links, images)
Moreover, this component allows you to react to messages with emojis and to show those reactions immediately.
Component
This section shows the preview of a sample Message List component and its source code.
- Preview
- Source Code
<Chat currentChannel="test-channel">
<MessageList fetchMessages={5} />
</Chat>
Try it out
Test the component as Sue Flores (default user).
-
Go either to the Message Input or Typing Indicator component and type in a message in the input field.
-
Upon sending, the message will appear at the bottom of the messsge list.
Parameters
You can configure the component using these parameters:
| Parameter | Type | Default value | Description |
|---|---|---|---|
fetchMessages? | number | 0 | Set this option to a non-zero value to enable fetching messages from the Message Persistence API. This feature uses the infinite scrolling pattern and takes a maximum value of 25. |
welcomeMessages? | false | MessageEnvelope | MessageEnvelope[] | n/a | Option to provide custom welcome messages to replace the default ones. Set to "false" to disable it. |
enableReactions? | boolean | false | Option to enable rendering reactions that were added to messages. Make sure to also set up reactionsPicker when this option is enabled. |
reactionsPicker? | ReactElement<EmojiPickerElementProps> | n/a | Option to pass in a component used for picking message reactions. For more details, refer to the Message Reactions section in the docs. |
extraActionsRenderer? | (message: MessageEnvelope) => JSX.Element | n/a | Option to provide an extra actions renderer to add custom action buttons to each message. |
messageRenderer? | (props: MessageRendererProps) => JSX.Element | n/a | Option to provide a custom message item renderer if themes and CSS variables aren't enough. |
bubbleRenderer? | (props: MessageRendererProps) => JSX.Element | n/a | Option to provide a custom message bubble renderer if themes and CSS variables aren't enough. |
fileRenderer? | (file: FileAttachment) => JSX.Element | n/a | Option to provide a custom file renderer to change how images and other files are shown. |
filter? | (message: MessageEnvelope) => boolean | n/a | This option only works when you use either messageRenderer or bubbleRenderer. It allows you to apply one of the custom renderers only to the messages selected by the filter. |
onScroll? | (event: UIEvent<HTMLElement>) => unknown | n/a | Callback run on a list scroll. |