Overview (v9)
react-i18next depends on i18next to provide the localization features. So there are two main things flowing through your render tree:
- 1.
- 2.
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 |
i18n, defaultNS | i18n, defaultNs | | |
| t, i18n | i18n | |
| t, i18n | i18n | |
| | 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.
- 2.
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;
Last modified 4yr ago