---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-components/member-list
title: Member List for PubNub Chat Components for React
updated_at: 2026-06-22T14:37:04.705Z
---

> 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


# Member 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).
:::

Renders a list of members.

It can represent all users of the application, only members of the current channel, users currently subscribed/present on the channel, or whatever else is passed into it. Custom memberRenderer can be used to modify how the users are rendered. For example you can add presence indicators.

## Component

This section shows the preview of a sample Member List component and its source code.

### Preview

Sue Flores (You)

VP Sales

Anna Gordon

VP Marketing

Luis Griffin

Environmental Tech

Jenny Porter

Engineer

Luke Young

Product Engineer

Marie Harper

Technical Writer

Mark Kelley

Office Assistant

Sue Jones

Desktop Support Technician

Tom Martinez

Product Engineer

Veronica Barrett

Registered Nurse

### Source Code

```tsx
<Chat currentChannel="test-channel">
<MemberList
  presentMembers={[
    "user_3c4400761cba4b65b77b6cae55fc21eb",
    "user_def709b1adfc4e67b98bb7a820f581b1",
    "user_a56c20222c484ff8987ec9b69b0c8f5b"
  ]}
  members={[
    {
        "name": "Mark Kelley",
        "custom": {
            "title": "Office Assistant"
        },
        "email": null,
        "eTag": "AYGyoY3gre71eA",
        "externalId": null,
        "id": "user_63ea15931d8541a3bd35e5b1f09087dc",
        "profileUrl": "https://randomuser.me/api/portraits/men/1.jpg",
        "updated": "2020-09-23T09:23:34.598494Z"
    },
    {
        "name": "Anna Gordon",
        "custom": {
            "title": "VP Marketing"
        },
        "email": null,
        "eTag": "AZDyqJ7andTHlAE",
        "externalId": null,
        "id": "user_3c4400761cba4b65b77b6cae55fc21eb",
        "profileUrl": "https://randomuser.me/api/portraits/women/1.jpg",
        "updated": "2020-09-23T09:23:33.598365Z"
    },
    {
        "name": "Luis Griffin",
        "custom": {
            "title": "Environmental Tech"
        },
        "email": null,
        "eTag": "AeTqgs2X16ql2wE",
        "externalId": null,
        "id": "user_def709b1adfc4e67b98bb7a820f581b1",
        "profileUrl": "https://randomuser.me/api/portraits/men/2.jpg",
        "updated": "2020-09-23T09:23:31.809198Z"
    },
    {
        "name": "Sue Flores",
        "custom": {
            "title": "VP Sales"
        },
        "email": null,
        "eTag": "Acmf1d+vmczaKw",
        "externalId": null,
        "id": "user_a56c20222c484ff8987ec9b69b0c8f5b",
        "profileUrl": "https://randomuser.me/api/portraits/women/2.jpg",
        "updated": "2020-09-23T09:23:31.837372Z"
    },
    {
        "name": "Luke Young",
        "custom": {
            "title": "Product Engineer"
        },
        "email": null,
        "eTag": "AczQlJSt5Zn9jAE",
        "externalId": null,
        "id": "user_e0e43601f93249c382415521188f0208",
        "profileUrl": "https://randomuser.me/api/portraits/men/3.jpg",
        "updated": "2020-09-23T09:23:36.617721Z"
    },
    {
        "name": "Jenny Porter",
        "custom": {
            "title": "Engineer"
        },
        "email": null,
        "eTag": "AZSThaqOxP67Rg",
        "externalId": null,
        "id": "user_ed145d8b0f094b83a2d51d428a59d0cb",
        "profileUrl": "https://randomuser.me/api/portraits/women/3.jpg",
        "updated": "2020-09-23T09:23:32.810646Z"
    },
    {
        "name": "Sue Jones",
        "custom": {
            "title": "Desktop Support Technician"
        },
        "email": null,
        "eTag": "AZi01cCxr8eo5AE",
        "externalId": null,
        "id": "user_912210948aa849eda2c3e0c2b58355e6",
        "profileUrl": "https://randomuser.me/api/portraits/women/10.jpg",
        "updated": "2020-09-23T09:23:34.54631Z"
    },
    {
        "name": "Marie Harper",
        "custom": {
            "title": "Technical Writer"
        },
        "email": null,
        "eTag": "Ad2mzoKft7HsWQ",
        "externalId": null,
        "id": "user_0368d27f4d514079bc5cfd5678ec1fe7",
        "profileUrl": "https://randomuser.me/api/portraits/women/12.jpg",
        "updated": "2020-09-23T09:23:32.180254Z"
    },
    {
        "name": "Tom Martinez",
        "custom": {
            "title": "Product Engineer"
        },
        "email": null,
        "eTag": "Ad/X1fzkiOTFzwE",
        "externalId": null,
        "id": "user_83647bfb6bcd412d93b1e57e1b602d3a",
        "profileUrl": "https://randomuser.me/api/portraits/men/13.jpg",
        "updated": "2020-09-23T09:23:31.848064Z"
    },
    {
        "name": "Veronica Barrett",
        "custom": {
            "title": "Registered Nurse"
        },
        "email": null,
        "eTag": "AZuL1I+IxJPm4gE",
        "externalId": null,
        "id": "user_4ec689d24845466e93ee358c40358473",
        "profileUrl": "https://randomuser.me/api/portraits/women/15.jpg",
        "updated": "2020-09-23T09:23:31.819548Z"
    }
]}
/>
</Chat>
```

## Parameters

You can configure the component using these parameters:

| Parameter | Default value | Description |
| --- | --- | --- |
| members? | UserEntity[] | Optional |  | `[]` | Option to pass a list of members, including metadata, to render on the list. |
| presentMembers? | string[] | Optional |  | `[]` | Option to pass a list of present member IDs to mark them with a presence indicator. |
| selfText? | string | Optional |  | `"(You)"` | This text is added after current user's name. |
| sort? | (a: | Optional |  | n/a | Members are sorted by presence and alphabetically by default, you can override that by providing a sorter function. |
| extraActionsRenderer? | (member: | Optional |  | n/a | Provide extra actions renderer to add custom action buttons to each member. |
| memberRenderer? | (member: | Optional |  | n/a | Option to provide a custom user renderer to override themes and CSS variables. |
| onMemberClicked? | (member: | Optional |  | n/a | A callback run when user clicked one of the members. |

## Terms in this document

* **Access Manager** - A cryptographic, token-based permission administrator that allows you to regulate clients' access to PubNub resources, such as channels, channel groups, and user IDs.
* **Action** - The type of activity (procedure) to execute when a condition is satisfied (for example, sending a message).
* **Billing alert notification** - A means of informing a user that a billing alert has been triggered. Before notifications can happen, a billing alert must be triggered first.
* **Business Object** - A container for data fields and metrics that defines aggregations and data sources.
* **Channel** - A pathway for sending and receiving messages between devices, created automatically when you first use it, that can handle any number of users and messages for different communication needs, like 1-1 text chats, group conversations, and other data streaming.
* **Channel pattern** - A way to group and analyze channel data to track performance metrics like message counts and user engagement over time with PubNub Insights.
* **Condition** - A requirement that must be satisfied or evaluated to true for an action to be executed. Input in a decision table.
* **Cryptor** - An implementation of a specific cryptographic algorithm used for data encryption/decryption that adheres to a standard interface.
* **Dashboard** - A collection of widgets (charts) that give an overview of the metrics one is evaluating.
* **Data fields** - Data you want Illuminate to track. These can be quantitative (measures), like "Number" or "Timestamp" or qualitative (dimensions) values, like "String" that can be used to categorize and segment data. Data fields can be aggregated and calculated.
* **Decision** - A collection (or decision table) of conditions and actions. When conditions are satisfied, the corresponding actions are triggered as per defined rules.
* **End Customer** - A customer of a PubNub partner. End customers do not have direct access to the Admin Portal. Instead, they interact with PubNub products—such as Illuminate—through the partner’s portal, where PubNub services are embedded. They can create PubNub objects only within this partner-provided environment.
* **Entity** - A subscribable object within a PubNub SDK that allows you to perform context-specific operations.
* **Listener** - A function or objectthat reacts to events or messages, like new chat messages or connection updates, letting your app respond in real-time.
* **Mapped/Unmapped** - Whether the data source for a data field has been defined or the action has been configured.
* **MCP Server** - A Model Context Protocol server that coordinates communication and synchronization between AI agents, clients, or services, such as Cursor IDE and Windsurf.
* **Message** - A unit of data transmitted between clients or between a client and a server in PubNub, containing information such as text, binary data, or structured data formats like JSON. Messages are sent over channels and can be tracked for delivery and read status.
* **Metric** - What exactly is evaluated using measures and dimensions (collectively called data fields), as well as aggregation functions.
* **Module** - A Functions v1 container that groups related functions for configuration and deployment on an app’s keysets.
* **Origin** - The subdomain used to establish a connection to the PubNub network that allows your application's traffic to appear like it's coming from your own domain.
* **Package** - A Functions v2 container that groups Functions, tracks Revisions, and is deployed to keysets.
* **Partner** - A PubNub customer who resells PubNub products, such as Illuminate, to their own customers. Partners have access to the Admin Portal, enabling them to create and manage PubNub objects for themselves or on behalf of their end customers.
* **Publish Key** - A unique identifier that allows your application to send messages to PubNub channels. It's part of your app's credentials and should be kept secure.
* **PubNub** - PubNub is a real-time messaging platform that provides APIs and SDKs for building scalable applications. It handles the complex infrastructure of real-time communication, including: Message delivery and persistence, Presence detection, Access control, Push notifications, File sharing, Serverless processing with Functions and Events & Actions, Analytics and monitoring with BizOps Workspace, AI-powered insights with Illuminate.
* **Push token** - A device identifier issued by a push provider (APNs or FCM) used to register a device for receiving mobile push notifications.
* **Rule** - A definition (row in a decision table) stating which action should be triggered for which condition.
* **Service Integration** - A machine identity that represents a program or service consuming the Admin API, scoped to your account and authenticated using expirable API keys with configurable permissions.
* **Signal** - A non-persistent message limited to 64 bytes designed for high-volume usecases where the the most recent data is relevant, like GPS location updates.
* **Subscribe Key** - A unique identifier that allows your application to receive messages from PubNub channels. It's part of your app's credentials and should be kept secure.
* **Timetoken** - A unique identifier for each message that represents the number of 100-nanosecond intervals since January 1, 1970, for example, 16200000000000000.
* **Trigger details** - A set of predefined criteria for a given billing alert. When met, billing alert notifications are generated.
* **User** - An individual or entity that interacts with a system, application, or service. In PubNub, a user typically refers to someone who sends or receives messages through the platform, identified by a unique user ID or username.
* **User ID** - UTF-8 encoded, unique string of up to 92 characters used to identify a single client (end user, device, or server) that connects to PubNub.
* **Vibe Coding** - A way to build applications in an intuitive, relaxed, and improvisational manner, using AI tools and natural language descriptions.