---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-components/message-list
title: Message List for PubNub Chat Components for React
updated_at: 2026-06-17T11:36:48.938Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Message List for PubNub Chat Components for React

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

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

Loading...

### Source Code

```tsx
<Chat currentChannel="test-channel">
  <MessageList fetchMessages={5} />
</Chat>
```

### Try it out

Test the component as Sue Flores (default user).

1. Go either to the Message Input or Typing Indicator component and type in a message in the input field.
2. Upon sending, the message will appear at the bottom of the messsge list.

## Parameters

You can configure the component using these parameters:

| Parameter | Default value | Description |
| --- | --- | --- |
| fetchMessages? | number | Optional |  | `0` | Set this option to a non-zero value to enable fetching messages from the [Message Persistence API](https://www.pubnub.com/docs/sdks/javascript/api-reference/storage-and-playback). This feature uses the infinite scrolling pattern and takes a maximum value of `25`. |
| welcomeMessages? | false | Optional |  | n/a | Option to provide custom welcome messages to replace the default ones. Set to "false" to disable it. |
| enableReactions? | boolean | Optional |  | `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> | Optional |  | n/a | Option to pass in a component used for picking message reactions. For more details, refer to the [Message Reactions](https://www.pubnub.com/docs/chat/components/react/message-reactions) section in the docs. |
| extraActionsRenderer? | (message: | Optional |  | n/a | Option to provide an extra actions renderer to add custom action buttons to each message. |
| messageRenderer? | (props: | Optional |  | n/a | Option to provide a custom message item renderer if themes and CSS variables aren't enough. |
| bubbleRenderer? | (props: | Optional |  | n/a | Option to provide a custom message bubble renderer if themes and CSS variables aren't enough. |
| fileRenderer? | (file: | Optional |  | n/a | Option to provide a custom file renderer to change how images and other files are shown. |
| filter? | (message: | Optional |  | 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: | Optional |  | n/a | Callback run on a list scroll. |