NamespacesConsumer (v9)

Last updated 4 months ago

Was introduced in v8.0.0. Not available in older versions.
The NamespacesConsumer is a so called render prop. The component passes the t function to child function and triggers loading the translation files defined. Further it asserts the component gets rerendered on language change or on changes to the translations themselves.
To learn more about using the t function have a look at i18next documentation:
​essentials​
​interpolation​
​formatting​
​plurals​
...
Sample usage
import React from 'react';
import { NamespacesConsumer } from 'react-i18next';
​
function TranslatableView() {
  return (
    <NamespacesConsumer ns={[
      'defaultNamespace',
      'anotherNamespace'
    ]}>
      {
        (t, { i18n, ready }) => (
          <div>
            <h1>{t('keyFromDefault')}</h1>
            <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
          </div>
        )
      }
    </NamespacesConsumer>
  )
}
NamespacesConsumer props
options
type (default)
description
wait
boolean (false)
assert all provided namespaces are loaded before rendering the component (can be set globally too).

Note that rendering will not be blocked again when dynamically updating the ns prop after initial mount.
​
In most cases you like to set this to true. If not handling not ready by evaluating ready.
nsMode
string ('default')
default: namespaces will be loaded an the first will be set as default

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
i18n
object (undefined)
pass i18next via options (useful for next.js usage)
initialI18nStore
object (undefined)
pass in initial translations (useful for next.js usage)
initialLanguage
string (undefined)
pass in initial language (useful for next.js usage)

legacy v9 - Previous

withNamespaces (v9)

Next - legacy v9

Trans Component (v9)

*options*	*type (default)*	*description*
wait	boolean (false)	assert all provided namespaces are loaded before rendering the component (can be set globally too). Note that rendering will not be blocked again when dynamically updating the `ns` prop after initial mount. In most cases you like to set this to true. If not handling not ready by evaluating ready.
nsMode	string ('default')	default: namespaces will be loaded an the first will be set as default 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
i18n	object (undefined)	pass i18next via options (useful for next.js usage)
initialI18nStore	object (undefined)	pass in initial translations (useful for next.js usage)
initialLanguage	string (undefined)	pass in initial language (useful for next.js usage)