# Network Quality Indicator

The default `ParticipantViewUI` includes a connection quality indicator showing participant network conditions: unspecified, poor, good, or excellent.

## Best Practices

- Display quality indicator inside `ParticipantViewUI` for each participant.
- Use `SfuModels.ConnectionQuality` enum for readable quality values.
- Consider showing warnings only for poor/unspecified to reduce visual noise.

![Image of connection quality indicators](/data/docs/video/react/_assets/ui-cookbook/network-quality-indicator/quality-indicators.png)

This guide shows how to build a custom connection quality indicator.

### How to reach the state

Each [`StreamVideoParticipant`](https://github.com/GetStream/stream-video-js/blob/main/packages/client/src/types.ts) has a `connectionQuality` property which by itself is just a numeric representation of values in a `SfuModels.ConnectionQuality` enum. To get a readable format out of it we'll just pass the `connectionQuality` variable as a key to said enum:

```tsx
import { SfuModels } from "@stream-io/video-react-sdk";

const readableConnectionQuality =
  SfuModels.ConnectionQuality[participant.connectionQuality];

console.log(readableConnectionQuality); // -> EXCELLENT
```

### Network quality indicator component

You'll most likely be displaying this indicator component inside each participant box ([ParticipantView](/video/docs/react/ui-components/core/participant-view/)) within a call layout, you can learn more about `ParticipantViewUI` customizations in [the participant view customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/).

```tsx
import {
  SfuModels,
  useParticipantViewContext,
} from "@stream-io/video-react-sdk";

const MyNetworkQualityIndicator = () => {
  const { participant } = useParticipantViewContext();

  const readableConnectionQuality =
    SfuModels.ConnectionQuality[participant.connectionQuality];

  return (
    <span title={readableConnectionQuality}>
      {"⭐️".repeat(participant.connectionQuality)}
    </span>
  );
};

const CustomParticipantViewUI = () => {
  return (
    <>
      <MyNetworkQualityIndicator />
      {/* your other custom UI elements */}
    </>
  );
};
```

## Final steps

Now we can pass this custom `ParticipantViewUI` component down to our call layout components or directly to `ParticipantView` component in our custom call layout as described in the aforementioned [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/).


---

This page was last updated at 2026-03-13T13:18:45.205Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-cookbook/network-quality-indicator/](https://getstream.io/video/docs/react/ui-cookbook/network-quality-indicator/).