Skip to content
FrameworkStyle

Translator

Typed function that resolves English translation phrases to localized strings

Translator is the callable returned by createTranslator. It turns current English phrases from core controls into localized copy and interpolates {placeholder} tokens when params are required.

useTranslator also returns a Translator from the nearest I18nProvider.

Import 

import type { Translator } from '@videojs/react/i18n';

Definition 

type Translator = <K extends keyof TranslationParams>(
  key: K,
  ...args: TranslationParams[K] extends never ? [] : [params: TranslationParams[K]]
) => string;
  • Plain phrases: t('Play')
  • Parametric phrases: t('Seek forward {seconds} seconds', { seconds: 10 })

Missing phrases in the active map resolve to the source English ('Play') so partial locale packs stay readable.

Create manually 

import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';

const t = createTranslator(getI18nTranslations('pt-BR'), 'pt-BR');
t('Pause');

React hook 

import { useTranslator } from '@videojs/react/i18n';

function Label() {
  const t = useTranslator();
  return <span>{t('Play')}</span>;
}

Control components resolve phrases from core getLabel() through their framework adapters. You rarely call t() directly unless building custom UI.

Related