# createI18n

Factory that creates framework i18n helpers with custom loading options

## Import

```ts
import { createI18n } from "@videojs/html/i18n";
```

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

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

`createI18n(options?): CreateI18nResult`

### Parameters

| Parameter | Type | Default |
| --- | --- | --- |
| `options` | `{ loader?: ((tag: string) => Promise<Partial<FlatTranslations> \| undefined>) }` | — |

### Return Value

| Property | Type |
| --- | --- |
| `context` | `Context<symbol, I18nContextValue>` |
| `I18nController` | `typeof I18nController` |
| `ProviderMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |
| `TextMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |