# useQualityOptions

Hook to build video quality menu options from the player rendition state

## Import

```tsx
import { useQualityOptions } from "@videojs/react";
```

`useQualityOptions` returns the current quality value, the available options, and a `setValue` callback for wiring quality selection into a menu. It returns `null` when the [quality feature](https://videojs.org/docs/framework/react/reference/api/feature-quality) is not configured.

**QualityMenu.tsx**

```tsx
import { Menu, useQualityOptions } from "@videojs/react";

function QualityMenu() {
  const quality = useQualityOptions();
  if (quality?.state.availability !== "available") return null;

  return (
    <Menu.RadioGroup value={quality.value} onValueChange={quality.setValue} aria-label="Quality">
      {quality.options.map((option) => (
        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
          {option.label}
          <Menu.ItemIndicator checked={option.value === quality.value} />
        </Menu.RadioItem>
      ))}
    </Menu.RadioGroup>
  );
}
```

The first option is always `Auto`; selecting it returns control to adaptive bitrate selection. Options carry optional `tier` and `badge` fields (e.g. `4K`, `HD`) for richer labels. Pass `formatRendition` to customize the visible rendition labels.

See [QualityRadioGroup](https://videojs.org/docs/framework/react/reference/components/quality-radio-group) for the component-level pattern, and [Menu](https://videojs.org/docs/framework/react/reference/components/menu) for a complete settings menu example.

## API Reference

`useQualityOptions(props?): QualityOptionsResult | null`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `props` | `{ label?: Text \| string \| ((state: QualityRadioGroupState) => Text \| string); formatRendition?: ((rendition: MediaVideoRendition) => Text \| string); disabled?: boolean }` | — | Optional `label`, `formatRendition`, and `disabled` overrides. |

### Return Value

| Property | Type |
| --- | --- |
| `state` | `{ label: Text \| string; value: string; options: readonly Option[]; disabled: boolean; hidden: boolean; availability: 'available' \| 'unavailable' }` |
| `label` | `string` |
| `value` | `string` |
| `selectedLabel` | `string` |
| `options` | `QualityOption[]` |
| `disabled` | `boolean` |
| `hidden` | `boolean` |
| `setValue` | `((value: string) => void)` |

---

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