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`	`CreateI18nOptions`	`—`
Description Optional hooks such as custom built-in locale loading.

Return Value

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

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 { I18nProvider, useTranslator } = createI18n({
  loader: async (tag) => {
    const mod = await import(`@videojs/react/i18n/locales/${tag}`);
    return mod.default;
  },
});

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

API Reference

Parameters

Parameter	Type	Default	Details
`options`	`CreateI18nOptions`	`—`
Description Optional hooks such as custom built-in locale loading.

Return Value

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