Translate HOC

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 } = props;

  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

results matching ""

    No results matching ""