Participants list
The SDK provides a default implementation for listing call participants in CallParticipantsList
component.
![Default UI of call participant list](/video/docs/assets/images/call-participant-list-9d8ac58afc96857e202aeeeafc8c9aa0.png)
![Default UI of call participant list with admin actions menu](/video/docs/assets/images/call-participant-list-with-admin-actions-menu-311e251a4dc5be3df5f0b7b77ed3b7b2.png)
![Default UI of call participant list with user actions menu](/video/docs/assets/images/call-participant-list-with-user-actions-menu-ef309d728764f5ca6ff488ba8204d386.png)
The component supports the following features:
- list active with their device mute statuses
- list blocked participants
- searching among the active or blocked participants
- mute all users by call owners
- per user actions like pin, block etc. (depends on each participant's permissions)
General usage
import {
Call,
CallParticipantsList,
StreamCall,
} from '@stream-io/video-react-sdk';
const MyParticipantList = () => {
let call: Call;
return (
<StreamCall call={call}>
<CallParticipantsList />
</StreamCall>
);
};
Props
activeUsersSearchFn
Type |
---|
(searchQuery: string) => Promise<StreamVideoParticipant[]> | undefined |
Custom function to override the searching logic of active participants.
blockedUsersSearchFn
Type |
---|
(searchQuery: string) => Promise<string[]> | undefined |
Custom function to override the searching logic of blocked users.
debounceSearchInterval
Type | Default |
---|---|
number | undefined | 200 |
Interval in ms, during which the participant search calls will be debounced.
onClose
Type |
---|
() => void |
Click event listener function to be invoked in order to dismiss/hide the CallParticipantsList from the UI.
Customization
You can create your own participant list using the SDK's participant hooks.