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.
This section shows the preview of a sample Member List component and its source code.
- Source Code
Sue Flores (You)
Desktop Support Technician
show all 131 lines
"name": "Mark Kelley",
"title": "Office Assistant"
You can configure the component using these parameters:
|UserEntity | string||Option to pass a list of members, including metadata, to render on the list.|
|string||Option to pass a list of present member IDs to mark them with a presence indicator.|
|string||This text is added after current user's name.|
|(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.|
|(member: UserEntity) => JSX.Element||n/a||Provide extra actions renderer to add custom action buttons to each member.|
|(member: UserEntity) => JSX.Element||n/a||Option to provide a custom user renderer to override themes and CSS variables.|
|(member: UserEntity) => unknown||n/a||A callback run when user clicked one of the members.|