latest
legacy v9
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.
Components
Component
Props
Provides
Consumes
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
1
import { I18nextProvider, NamespacesConsumer, Trans, withNamespaces } from 'react-i18next';
2
import i18n from `./i18n`; // the initialized i18next instance
3
​
4
export default function App () {
5
return (
6
<I18nextProvider i18n={i18n}>
7
<NamespacesConsumer>
8
{
9
t => <h1>{t('key')}</h1>
10
}
11
</NamespacesConsumer>
12
<MyComponentWithHoc />
13
</I18nextProvider>
14
)
15
}
16
​
17
function MyComponent({ t }) {
18
return (
19
<Trans i18nKey="userMessagesUnread" count={count}>
20
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
21
</Trans>
22
)
23
}
24
​
25
const MyComponentWithHoc = withNamespaces()(MyComponent);
Copied!
Getting the t function
To get the t function (providing the translation functionality) down to your component you have two options:
- 1.
- 2.
Getting the i18n function into the flow
You have the following options to pass the i18next instance to the hoc, render prop and Trans component:
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import { I18nextProvider } from 'react-i18next';
4
​
5
import App from './App'; // your entry page
6
import i18n from './i18n'; // initialized i18next instance
7
​
8
ReactDOM.render(
9
<I18nextProvider i18n={ i18n }>
10
<App />
11
</I18nextProvider>,
12
document.getElementById('app')
13
);
Copied!
Use the reactI18nextModule
1
import i18n from 'i18next';
2
import { reactI18nextModule } from 'react-i18next';
3
​
4
​
5
i18n
6
.use(reactI18nextModule) // if not using I18nextProvider
7
.init({ /* options */ });
8
​
9
export default i18n;
Copied!
Last modified 3yr ago