Skip to content
FrameworkStyle

I18nContext

React context carrying the active translator and locale

Import

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

Usage

Read the context directly when building i18n integration infrastructure. It is null when no I18nProvider is mounted.

import { I18nContext } from "@videojs/react";
import { useContext } from "react";

function LocaleDebug() {
  const i18n = useContext(I18nContext);

  return <output>{i18n?.locale ?? "No i18n provider"}</output>;
}

Application components should normally use useTranslator or useLocale, which provide English defaults when there is no provider.

API Reference

Return Value

PropertyTypeDetails
translatorTranslator
locale(typeof LOCALES)[number] | string & o...
localeFromPropboolean
localeFromOwnPropboolean
translationsPartial<Translations>
onActiveLocaleChangefunction