createI18n

Factory that creates framework i18n helpers with custom loading options

createI18n returns a context-bound ProviderMixin, TextMixin, and I18nController for custom elements. Use it when you need a custom locale loader or custom i18n elements. Most apps use <media-i18n> and <media-text> from @videojs/html/i18n.

import { ReactiveElement } from '@videojs/element';
import { createI18n } from '@videojs/html/i18n';

const { ProviderMixin, TextMixin } = createI18n();

class LocalizedRoot extends ProviderMixin(ReactiveElement) {}
class LocalizedText extends TextMixin(ReactiveElement) {}

API Reference

Parameters

Parameter	Type	Default	Details
`options`	`{ loader?: LocaleLoader }`	`—`

Return Value

Property	Type	Details
`context`	`Context<symbol, I18nContextValue>`
`I18nController`	`typeof I18nController`
`ProviderMixin`	`function`
Type `((Base: Base) => Constructor<ReactiveElement> & Base)`
`TextMixin`	`function`
Type `((Base: Base) => Constructor<ReactiveElement> & Base)`

createI18n returns an I18nProvider, useTranslator, and useLocale wired to the shared React i18n context used by the stock skins and controls. Use it when you need options such as a custom locale loader. Most apps use the default exports from @videojs/react/i18n.

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

const loaders = {
  ja: () => import('@videojs/react/i18n/locales/ja'),
};

const { I18nProvider, useTranslator } = createI18n({
  loader: async (tag) => {
    const load = loaders[tag as keyof typeof loaders];
    return load ? (await load()).default : undefined;
  },
});

function App() {
  return (
    <I18nProvider locale="ja">
      <Controls />
    </I18nProvider>
  );
}

API Reference

Parameters

Parameter	Type	Default	Details
`options`	`object`	`—`
Description Optional hooks such as custom built-in locale loading. Type `{ loader?: ((tag: string) => Promise<Partial<FlatTranslations> \| undefined>) }`

Return Value

Property	Type	Details
`I18nContext`	`Context<I18nContextValue \| null>`
`I18nProvider`	`function`
Type `((props: I18nProviderProps) => ReactNode)`
`useTranslator`	`typeof useTranslator`
`useLocale`	`typeof useLocale`