withNamespaces (v9)
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:
- ...
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 i18next
export default withNamespaces()(TranslatableView);
// or: using a function to return namespaces based on props
export 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 options
react: {
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) | 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) | |
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) | |
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) | |
initialLanguage | object (undefined) |
Last modified 3yr ago