Skip to content

ReferenceMenu

useCaptionsOptions

Hook to build captions menu options from the player text track state

Import

import { useCaptionsOptions } from "@videojs/react";

useCaptionsOptions returns the currently showing caption track, the available options (starting with an Off option), and a setValue callback for wiring caption selection into a menu. It returns null when the text tracks feature is not configured.

import { Menu, useCaptionsOptions } from "@videojs/react";

function CaptionsMenu() {
  const captions = useCaptionsOptions();
  if (captions?.state.availability !== "available") return null;

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

Option labels use the track label, then language, then kind. Pass formatTrack to customize the visible labels. The result also exposes showMenu, which is true when more than one caption or subtitle track is available — the same threshold CaptionsButton uses to open a menu instead of toggling in menuTrigger mode.

See CaptionsRadioGroup for the component-level pattern, and Menu for a complete settings menu example.

API Reference

useCaptionsOptions(props?): CaptionsOptionsResult | null

Parameters

ParameterTypeDefaultDetails
propsobject—

Return Value

PropertyTypeDetails
stateobject
labelstring
valuestring
selectedLabelstring
optionsCaptionsOption[]
disabledboolean
hiddenboolean
showMenuboolean
setValuefunction