latest
legacy v9
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).
1
withNamespaces(namespaces, options)(MyComponent);
Copied!
To learn more about using the t function have a look at i18next documentation:
- ...
Sample
1
import React from 'react';
2
import { withNamespaces } from 'react-i18next';
3
​
4
function TranslatableView(props) {
5
const { t, tReady } = props;
6
// tReady is true if translations were loaded.
7
// Use wait option to not render before loaded
8
// or render placeholder yourself if not tReady=false
9
​
10
return (
11
<div>
12
<h1>{t('keyFromDefault')}</h1>
13
<p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
14
</div>
15
)
16
}
17
​
18
export default withNamespaces([
19
'defaultNamespace',
20
'anotherNamespace'
21
], { /* additional options see below */ })(TranslatableView);
22
​
23
// or: short for only loading one namespace:
24
export default withNamespaces('defaultNamespace')(TranslatableView);
25
​
26
// or: short for using defaultNS defined in i18next
27
export default withNamespaces()(TranslatableView);
28
​
29
// or: using a function to return namespaces based on props
30
export default withNamespaces((props) => props.namespaces)(TranslatableView);
Copied!
If not using the reactI18nextModule this hoc should be nested inside a I18nextProvider. Alternatively you can pass the i18next instance via prop
i18n.Using with TypeScript
To help you using TypeScript and the @withNamespaces decorator here is a trival example:
1
import * as React from 'react';
2
import { withNamespaces, WithNamespaces } from 'react-i18next';
3
​
4
class MyComponent extends React.PureComponent<WithNamespaces> {
5
public render() {
6
const { t } = this.props;
7
return (
8
<React.Fragment>
9
<span>{t('my-component-content')}</span>
10
</React.Fragment>
11
);
12
}
13
}
14
export default withNamespaces()(MyComponent);
Copied!
​
Set defaults for all used withNamespaces
Most time you like to change those values for every component.
Set those on i18next init:
1
i18n.init({
2
// ... other options
3
react: {
4
wait: false,
5
withRef: false,
6
bindI18n: 'languageChanged loaded',
7
bindStore: 'added removed',
8
nsMode: 'default'
9
}
10
});
Copied!
withNamespaces options:
1
export default withNamespaces(
2
'defaultNamespace',
3
{ wait: true } // <-- options
4
)(TranslatableView);
Copied!
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)
either pass in a object React.createRef or a ref function like (c) => this.myRef = c;
​
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
usePureComponent
boolean (false)
use shallowEqual on props change if set to true
withNamespaces props:
name
type (default)
description
i18n
object (undefined)
pass i18next instance by props instead of having it on context
Last modified 2yr ago