# Participants list

`CallParticipantsList` displays call participants with device mute statuses, blocked users, search, mute all (for owners), and per-user actions (pin, block, etc.) based on permissions.

## Best Practices

- Provide `onClose` callback to handle dismissing the list.
- Use custom search functions for large participant lists.
- Actions are permission-aware - no need to filter manually.

![Default UI of call participant list](https://getstream.io/docs-assets/images/03fb4179966b.png)

![Default UI of call participant list with admin actions menu](https://getstream.io/docs-assets/images/5754a84cc45b.png)

![Default UI of call participant list with user actions menu](https://getstream.io/docs-assets/images/81c8a0cde62f.png)

## General usage

```tsx
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](https://getstream.io/video/docs/react/v2/guides/call-and-participant-state/#participant-state).

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-components/participants/call-participants-list/](https://getstream.io/video/docs/react/v2/ui-components/participants/call-participants-list/).