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 (
      <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>

export default withNamespaces([
], { /* 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.

Using with TypeScript

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 (
export default withNamespaces()(MyComponent);

Set defaults for all used withNamespaces

Most time you like to change those values for every component.

Set those on i18next init:

  // ... other options
  react: {
    wait: false,
    withRef: false,
    bindI18n: 'languageChanged loaded',
    bindStore: 'added removed',
    nsMode: 'default'

withNamespaces options:

export default withNamespaces(
  { wait: true } // <-- options


type (default)



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.


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


function or object (undefined)

either pass in a object React.createRef or a ref function like (c) => this.myRef = c;

read more


string ('languageChanged loaded')

which events trigger a rerender, can be set to false or string of events


string ('added removed')

which events on store trigger a rerender, can be set to false or string of events


boolean (true)

Does not trigger rerenders while state not ready - avoiding unneeded renders on init


object (undefined)

pass i18next via options (useful for next.js usage


boolean (false)

use shallowEqual on props change if set to true

withNamespaces props:


type (default)



object (undefined)

pass i18next instance by props instead of having it on context


object (undefined)

pass in initial translations (useful for next.js usage)


object (undefined)

pass in initial language (useful for next.js usage)

Last updated