Member 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.

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

<Chat currentChannel="test-channel">
<MemberList
  presentMembers={[
    "user_3c4400761cba4b65b77b6cae55fc21eb",
    "user_def709b1adfc4e67b98bb7a820f581b1",
    "user_a56c20222c484ff8987ec9b69b0c8f5b"
  ]}
  members={[
    {
        "name": "Mark Kelley",
        "custom": {
            "title": "Office Assistant"
        },
        "email": null,
        "eTag": "AYGyoY3gre71eA",

show all 131 lines

Parameters

You can configure the component using these parameters:

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