Will be removed in the next major react-i18next version (v9.0.0).

The component can be replaced without changes with the new withNamespaces hoc.

The translate hoc is responsible for passing the t function to your component which enables all the translation functionality provided by i18next. Further, it asserts the component gets re-rendered on language change or changes to the translations themselves.

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).

Sample

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 options:

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

option

type (default)

description

wait

boolean (false)

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

nsMode

string ('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

string ('languageChanged loaded')

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

bindStore

string ('added removed')

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

omitBoundRerenders

boolean (true)

Does not trigger rerenders while state not ready - avoiding unneeded renders on init

withRef

boolean (false)

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

i18n

object (undefined)

pass i18next via options (useful for next.js usage

usePureComponent

boolean (false)

use shallowEqual on props change if set to true

The translate hoc props:

name

type (default)

description

i18n

object (undefined)

pass i18next instance by props instead of having it on context

initialI18nStore

object (undefined)

pass in initial translations (useful for next.js usage

initialLanguage

object (undefined)

pass in initial language (useful for next.js usage