Overview

Last updated 2 months ago

react-i18next depends on i18next to provide the localization features. So there are two main things flowing through your render tree:

  1. The i18next instance (short i18n)

  2. The translation function (short t)

While we primary rely on react context to pass down i18n and t the components are build to also accept those via props, options or in case of i18n via internal context / reactI18nextModule.

Components

Component

Props

Provides

Consumes

I18nextProvider

i18n, defaultNS

i18n, defaultNs

I18n is a render prop

t, i18n

i18n

Translate HOC

t, i18n

i18n

Trans Component is used to translate complexer 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 --> I18n or Translate HOC --> Trans or using t in your component

import { I18nextProvider, I18n, Trans, translate } from 'react-i18next';
import i18n from `./i18n`; // the initialized i18next instance
export default function App () {
return (
<I18nextProvider i18n={i18n}>
<I18n>
{
t => <h1>{t('key')}</h1>
}
</I18n>
<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 = translate()(myComponent);