Skip to content

Referencei18n

useTranslator

React hook that returns the typed translator for the nearest I18nProvider

Import

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

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

useTranslator(): Translator

Return Value

Translator