# ParticipantView

The `ParticipantView` component renders a participant's video and audio. It toggles between video and avatar based on video state, displays participant info, device settings, connection quality, and action buttons (e.g., pin).

Used to build [call layouts](/video/docs/react/ui-components/core/call-layout/). For performance, it only streams video for visible participants and requests appropriate quality/resolution (dynascale).

## Best Practices

- Don't create custom `ParticipantView` - use customization props instead.
- Use `ParticipantViewUI` prop to customize the overlay UI.
- Use `VideoPlaceholder` prop to customize the no-video state.
- Set `muteAudio={true}` only when rendering audio separately.

![Preview of the Call controls component.](@video/react/_assets/ui-components/participant.png)

<admonition type="note">

Please note that we suggest not to create a custom `ParticipantView` component as it contains complex, low-level logic related to performance. Please refer to the [Customization section](#customization) to see how you can tailor the component to your needs.

</admonition>

## General usage

You can use the `ParticipantView` component to create your own call layout:

```tsx {9}
import { ParticipantView, useCallStateHooks } from "@stream-io/video-react-sdk";

const MyCallUI = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();
  return (
    <>
      {participants.map((p) => (
        <ParticipantView participant={p} key={p.sessionId} />
      ))}
    </>
  );
};
```

## Props

### `participant`

| Type                                                                                                            |
| --------------------------------------------------------------------------------------------------------------- |
| [`StreamVideoParticipant`](https://github.com/GetStream/stream-video-js/blob/main/packages/client/src/types.ts) |

The participant whose video/audio stream we want to play.

### `ParticipantViewUI`

| Type                                        |
| ------------------------------------------- |
| `ComponentType` \| `ReactElement` \| `null` |

Override the default UI for rendering participant information/actions.

### `VideoPlaceholder`

| Type                                        |
| ------------------------------------------- |
| `ComponentType` \| `ReactElement` \| `null` |

Override the default UI that's visible when a participant turned off their video.

### `PictureInPicturePlaceholder`

| Type                                        |
| ------------------------------------------- |
| `ComponentType` \| `ReactElement` \| `null` |

Override the default UI that's visible when a participant video is playing in picture-in-picture.

### `trackType`

| Type                                         |
| -------------------------------------------- |
| `videoTrack` \| `screenShareTrack` \| `none` |

The kind of video stream to play for the given participant. The default value is `video`. You can use `none` if you're building an audio-only call.

### `className`

| Type                    |
| ----------------------- |
| `string` \| `undefined` |

Custom class applied to the root DOM element.

### `refs`

| Type                                                                               |
| ---------------------------------------------------------------------------------- |
| `{setVideoElement: Function, setVideoPlaceholderElement: Function}` \| `undefined` |

An object with set functions meant for exposing the video and video placeholder elements to the integrators.

### `muteAudio`

| Type      |
| --------- |
| `boolean` |

This prop is only useful for advanced use-cases (for example building your own paginated layout). When set to `true` it will mute the given participant's audio stream on the client side. The local participant is always muted.

## Customization

The [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/) tells all the important information about the customization options. It's useful when you want to attach custom event handlers to these elements.

We also have additional guides focusing on specific parts:

- [Video placeholder](/video/docs/react/ui-cookbook/video-placeholder/)
- [Connection Quality Indicator](/video/docs/react/ui-cookbook/network-quality-indicator/)
- [Connection Unstable Indicator](/video/docs/react/ui-cookbook/connection-unstable/)
- [Custom Label](/video/docs/react/ui-cookbook/participant-label/)


---

This page was last updated at 2026-07-10T16:05:29.765Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/core/participant-view/](https://getstream.io/video/docs/react/ui-components/core/participant-view/).