useQualityOptions

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

Import

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 is not configured.

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 for the component-level pattern, and Menu for a complete settings menu example.

API Reference

Parameters

Parameter	Type	Default	Details
`props`	`object`	`—`
Description Optional `label`, `formatRendition`, and `disabled` overrides.

Return Value

Property	Type	Details
`state`	`QualityRadioGroupCore.State`
`label`	`string`
`value`	`string`
`selectedLabel`	`string`
`options`	`QualityOption[]`
`disabled`	`boolean`
`hidden`	`boolean`
`setValue`	`function`
Type `((value: string) => void)`