# usePlaybackRateOptions

Hook to build playback rate menu options from the player playback rate state

## Import

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

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

**SpeedMenu.tsx**

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

function SpeedMenu() {
  const playbackRate = usePlaybackRateOptions();
  if (playbackRate?.state.availability !== "available") return null;

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

Options come from the player’s configured playback rates. Labels default to the rate followed by a multiplication sign (e.g. `1.5×`); pass `formatRate` to customize them. `setValue` accepts an option’s string value, while `setRate` accepts a number directly.

See [PlaybackRateRadioGroup](https://videojs.org/docs/framework/react/reference/components/playback-rate-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

`usePlaybackRateOptions(props?): PlaybackRateOptionsResult | null`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `props` | `{ label?: Text \| string \| ((state: PlaybackRateRadioGroupState) => Text \| string); formatRate?: ((rate: number) => string); disabled?: boolean }` | — | Optional `label`, `formatRate`, and `disabled` overrides. |

### Return Value

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

---

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