Member List for PubNub Chat Components for React

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.

User avatar

Sue Flores (You)

VP Sales

User avatar

Anna Gordon

VP Marketing

User avatar

Luis Griffin

Environmental Tech

User avatar

Jenny Porter

Engineer

User avatar

Luke Young

Product Engineer

User avatar

Marie Harper

Technical Writer

User avatar

Mark Kelley

Office Assistant

User avatar

Sue Jones

Desktop Support Technician

User avatar

Tom Martinez

Product Engineer

User avatar

Veronica Barrett

Registered Nurse

Parameters

You can configure the component using these parameters:

ParameterTypeDefault valueDescription
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 | 1n/aMembers are sorted by presence and alphabetically by default, you can override that by providing a sorter function.
extraActionsRenderer?(member: UserEntity) => JSX.Elementn/aProvide extra actions renderer to add custom action buttons to each member.
memberRenderer?(member: UserEntity) => JSX.Elementn/aOption to provide a custom user renderer to override themes and CSS variables.
onMemberClicked?(member: UserEntity) => unknownn/aA callback run when user clicked one of the members.