# Quality

Video rendition state and actions for the player store

Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.

## Import

```tsx
import { qualityFeature } from '@videojs/react';
```

The `videoFeatures` [feature bundle](https://videojs.org/docs/framework/react/guides/presets) includes this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `videoRenditionList` | `MediaVideoRendition[]` | Video renditions available for manual quality selection. |
| `activeVideoRendition` | `{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } \| null` | Video rendition currently playing, including when automatic ABR is selected. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `selectVideoRendition` | `(value: string) => void` | Select a video rendition by menu value, or automatic ABR with `"auto"`. |

### Selector

Pass `selectQuality` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to quality state. Returns `undefined` if the quality feature is not configured.

**QualityInfo.tsx**

```tsx
import { selectQuality, usePlayer } from '@videojs/react';

function QualityInfo() {
  const quality = usePlayer(selectQuality);
  if (!quality) return null;

  return <span>{quality.videoRenditionList.length} renditions</span>;
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt