Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
129 lines (96 sloc) 4.79 KB

Translate HOC

{% hint style="warning" %} 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. {% endhint %}

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.

{% hint style="info" %} 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