# createI18n

Factory that creates framework i18n helpers with custom loading options

## Import

```tsx
import { createI18n } from "@videojs/react/i18n";
```

`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`.

```tsx
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

`createI18n(options?): CreateI18nResult`

### Parameters

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

### Return Value

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

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt