Skip to content
FrameworkStyle

useTranslator

React hook that returns the typed translator for the nearest I18nProvider

useTranslator returns the translator from the nearest I18nProvider. 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.

Button
Reproducir
Parameterized
Adelantar 10 segundos
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>
  );
}

API Reference

Return Value

Translator