Skip to content

ReferenceMenu

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

useQualityOptions(props?): QualityOptionsResult | null

Parameters

ParameterTypeDefaultDetails
propsobject—

Return Value

PropertyTypeDetails
stateobject
labelstring
valuestring
selectedLabelstring
optionsQualityOption[]
disabledboolean
hiddenboolean
setValuefunction