react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  • What it does
  • When to use?
  • I18nextProvider props
  1. latest

I18nextProvider

Last updated 1 month ago

What it does

The I18nextProvider does take an i18next instance via prop i18n and passes that down using the context API.

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import App from './App';

<I18nextProvider i18n={i18n} defaultNS={'translation'}>
  <App />
</I18nextProvider>

When to use?

You will need to use the provider if you need to support multiple i18next instances - eg. if you provide a component library () or in scenarios for . Additionally, you have the ability to manage the default namespace(s) by passing defaultNS.

I18nextProvider props

name

type (default)

description

i18n

object (undefined)

pass i18next instance the provider will pass it down to translation components by context

defaultNS

string | string[] (undefined)

pass defaultNS to manage the default namespace(s)

like this example
SSR (ServerSideRendering)