---
title: I18nProvider
description: React provider that resolves locale and supplies a typed translator to descendants
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

<FrameworkCase frameworks={["react"]}>

`I18nProvider` resolves the active locale, lazy-loads built-in packs, merges registry and provider layers, and exposes a translator through context. Wrap it around a player or custom controls that should translate.

Wrap custom controls or force a locale explicitly:

```tsx
import { I18nProvider } from '@videojs/react/i18n';

<I18nProvider locale="de" translations={{ buttons: { play: 'Abspielen' } }}>
  <MyControls />
</I18nProvider>
```

Omit `locale` to inherit the nearest `lang` attribute (via `langRootRef` or `<html lang>`). English is the fallback when no non-English locale is active or no translation layer supplies a string. See <DocsLink slug="concepts/i18n">Internationalization</DocsLink> for merge priority, browser translation fallback, and SSR guidance.

<UtilReference util="I18nProvider" />

</FrameworkCase>
