Was introduced in v8.0.0. Not available in older versions.
The withNamespaces hoc is responsible for passing the t function to your component. It enables all the translation functionality provided by i18next. Further, it asserts your component gets re-rendered on language change or changes to the translation catalog itself (loaded translations).
withNamespaces(namespaces, options)(MyComponent);
To learn more about using the t function have a look at i18next documentation:
​essentials​
​interpolation​
​formatting​
​plurals​
...
import React from 'react';import { withNamespaces } 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 withNamespaces(['defaultNamespace','anotherNamespace'], { /* additional options see below */ })(TranslatableView);​// or: short for only loading one namespace:export default withNamespaces('defaultNamespace')(TranslatableView);​// or: short for using defaultNS defined in i18nextexport default withNamespaces()(TranslatableView);​// or: using a function to return namespaces based on propsexport default withNamespaces((props) => props.namespaces)(TranslatableView);
If not using the reactI18nextModule this hoc should be nested inside a I18nextProvider. Alternatively you can pass the i18next instance via prop i18n
.
To help you using TypeScript and the @withNamespaces decorator here is a trival example:
import * as React from 'react';import { withNamespaces, WithNamespaces } from 'react-i18next';​class MyComponent extends React.PureComponent<WithNamespaces> {public render() {const { t } = this.props;return (<React.Fragment><span>{t('my-component-content')}</span></React.Fragment>);}}export default withNamespaces()(MyComponent);
​
Most time you like to change those values for every component.
Set those on i18next init:
i18n.init({// ... other optionsreact: {wait: false,withRef: false,bindI18n: 'languageChanged loaded',bindStore: 'added removed',nsMode: 'default'}});
export default withNamespaces('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) ​ In most cases you like to set this to true. If not handling not ready by evaluating tReady. |
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 |
innerRef | function or object (undefined) | either pass in a object React.createRef or a ref function like (c) => this.myRef = c; ​ ​read more​ |
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 |
i18n | object (undefined) | pass i18next via options (useful for next.js usage​ |
usePureComponent | boolean (false) | use shallowEqual on props change if set to true |
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) |