The translate hoc is responsible to pass the t function to your component which enables all the translation functionality provide by i18next. Further it asserts the component gets rerendered on language change or changes to the translations themself.

To learn more about using the t function have a look at i18next documentation:

Can be nested inside a I18nextProvider. If not you will need to pass the i18next instance via prop i18n, in options or by using setI18n function (see below).

import React from 'react';
import { translate } from 'react-i18next';
function TranslatableView(props) {
const { t, tReady } = props;
// tReady is true if translations were loaded.
// Use wait option to not render before loaded
// or render placeholder yourself if not tReady=false
return (
<div>
<h1>{t('keyFromDefault')}</h1>
<p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
</div>
)
}
export default translate(['defaultNamespace', 'anotherNamespace'])(TranslatableView);
// short for only loading one namespace:
export default translate('defaultNamespace')(TranslatableView);
// short for using defaultNS of i18next
export default translate()(TranslatableView);
// using a function to return namespaces based on props
export default translate((props) => props.namespaces)(TranslatableView);

Using setI18n instead of the i18nextProvider

You can set the i18n instance using the setI18n function to avoid using the i18nextProvider:

import { translate } from 'react-i18next';
import i18n from './i18n';
translate.setI18n(i18n);

Set defaults for all your translate hoc components

Below you see how to pass options for one hoc. But most time you like to change those values for every component.

So there are two options:

a) Set those on i18next init:

i18next.init({
// ... other options
react: {
wait: false,
withRef: false,
bindI18n: 'languageChanged loaded',
bindStore: 'added removed',
nsMode: 'default'
}
});

b) Use the setDefaults function:

import { translate } from 'react-i18next';
translate.setDefaults({
wait: false,
withRef: false,
bindI18n: 'languageChanged loaded',
bindStore: 'added removed',
nsMode: 'default'
});

The translate hoc can take a few options:

export default translate('defaultNamespace', { wait: true })(TranslatableView);

options

default

description

wait

false

assert all provided namespaces are loaded before rendering the component (can be set globally too)

nsMode

'default'

default: namespaces will be loaded an the first will be set as default or fallback: namespaces will be used as fallbacks used in order provided

bindI18n

'languageChanged loaded'

which events trigger a rerender, can be set to false or string of events

bindStore

'added removed'

which events on store trigger a rerender, can be set to false or string of events

withRef

false

store a ref to the wrapped component and access it by decoratedComponent.getWrappedInstance();

i18n

undefined

pass i18next via options (useful for next.js usage

usePureComponent

false

use shallowEqual on props change if set to true

The translate hoc can use some props it gets passed:

options

default

description

i18n

undefined

pass i18next instance by props instead of having it on context

initialI18nStore

undefined

pass in initial translations (useful for next.js usage

initialLanguage

undefined

pass in initial language (useful for next.js usage