LiveKit docs › Hooks › useConnectionQualityIndicator

---

# useConnectionQualityIndicator

The `useConnectionQualityIndicator` hook provides props for the `ConnectionQualityIndicator` or your custom implementation of it component.

## Import

```typescript
import { useConnectionQualityIndicator } from "@livekit/components-react";

```

## Usage

```tsx
const { quality } = useConnectionQualityIndicator();
// or
const { quality } = useConnectionQualityIndicator({ participant });

```

## Properties

- **`options.participant`** _(Participant)_ (optional): 

## Returns

```typescript
{
  className: "lk-connection-quality";
  quality: import("livekit-client").ConnectionQuality;
}

```

---

This document was rendered at 2026-06-07T11:32:49.744Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/hook/useconnectionqualityindicator.md](https://docs.livekit.io/reference/components/react/hook/useconnectionqualityindicator.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).