Overview (v9)
react-i18next depends on i18next to provide the localization features. So there are two main things flowing through your render tree:
  1. 1.
    The i18next instance (short i18n)
  2. 2.
    The translation function (short t)
While we primary rely on react context to pass down i18n and t the components are built to also accept those via props, options or in case of i18n via internal context / reactI18nextModule.

Component
Props
Provides
Consumes
​I18nextProvider​
i18n, defaultNS
i18n, defaultNs
​
​NamespacesConsumer is a render prop
​
t, i18n
i18n
​withNamespaces hoc
​
t, i18n
i18n
​Trans Component is used to translate JSX nodes where just using t is insufficient
​
​
t, i18n
This means your tree will look something like this (assuming you use the options I18nextProvider):
I18nextProvider --> NamespacesConsumer or withNamespaces HOC --> Trans or using t in your component
import { I18nextProvider, NamespacesConsumer, Trans, withNamespaces } from 'react-i18next';
import i18n from `./i18n`; // the initialized i18next instance
​
export default function App () {
return (
<I18nextProvider i18n={i18n}>
<NamespacesConsumer>
{
t => <h1>{t('key')}</h1>
}
</NamespacesConsumer>
<MyComponentWithHoc />
</I18nextProvider>
)
}
​
function MyComponent({ t }) {
return (
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
)
}
​
const MyComponentWithHoc = withNamespaces()(MyComponent);

To get the t function (providing the translation functionality) down to your component you have two options:
  1. 1.
    Using the withNamespaces hoc
  2. 2.
    Using the NamespacesConsumer render prop

You have the following options to pass the i18next instance to the hoc, render prop and Trans component:

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
​
import App from './App'; // your entry page
import i18n from './i18n'; // initialized i18next instance
​
ReactDOM.render(
<I18nextProvider i18n={ i18n }>
<App />
</I18nextProvider>,
document.getElementById('app')
);

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
​
​
i18n
.use(reactI18nextModule) // if not using I18nextProvider
.init({ /* options */ });
​
export default i18n;
Copy link
On this page
Components
Getting the t function
Getting the i18n function into the flow
Use the provider
Use the reactI18nextModule