# useTranslator

React hook that returns the typed translator for the nearest I18nProvider

## Import

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

`useTranslator` returns the translator from the nearest [`I18nProvider`](https://videojs.org/docs/framework/react/reference/api/i18n-provider). Control components pass text descriptors from core `getLabel()`. Custom UI can pass an opaque key with its English fallback.

When no provider is mounted, the hook falls back to English registry strings so standalone demos do not throw.

## Example

Switch the provider locale to see `useTranslator` resolve a simple key and a parameterized key from the nearest provider.

**App.tsx**

```tsx
import { I18nProvider, useTranslator } from '@videojs/react/i18n';
import { useState } from 'react';

import './BasicUsage.css';

const translations = {
  es: {
    buttons: { play: 'Reproducir' },
    seek: { forward: 'Adelantar {seconds} segundos' },
  },
  fr: {
    buttons: { play: 'Lire' },
    seek: { forward: 'Avancer de {seconds} secondes' },
  },
} as const;

type Locale = keyof typeof translations;

function Labels() {
  const t = useTranslator();

  return (
    <dl className="react-use-translator-basic__output">
      <div>
        <dt>Button</dt>
        <dd>{t('buttons.play', { default: 'Play' })}</dd>
      </div>
      <div>
        <dt>Parameterized</dt>
        <dd>{t('seek.forward', { seconds: 10, default: 'Seek forward {seconds} seconds' })}</dd>
      </div>
    </dl>
  );
}

export default function BasicUsage() {
  const [locale, setLocale] = useState<Locale>('es');

  return (
    <div className="react-use-translator-basic">
      <label>
        Language
        <select value={locale} onChange={(event) => setLocale(event.currentTarget.value as Locale)}>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
        </select>
      </label>
      <I18nProvider locale={locale} translations={translations[locale]}>
        <Labels />
      </I18nProvider>
    </div>
  );
}
```

**App.css**

```css
.react-use-translator-basic {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.react-use-translator-basic label,
.react-use-translator-basic__output div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.react-use-translator-basic select {
  padding: 4px 8px;
}

.react-use-translator-basic__output {
  display: grid;
  gap: 8px;
  margin: 0;
}

.react-use-translator-basic__output dt {
  color: #6b7280;
}

.react-use-translator-basic__output dd {
  margin: 0;
}
```

## API Reference

`useTranslator(): Translator`

### Return Value

`Translator`

---

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