react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  • Sample usage
  • NamespacesConsumer props
  1. legacy v9

NamespacesConsumer (v9)

Last updated 9 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 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:

  • ...

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)

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 and 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)

initialI18nStore

object (undefined)

initialLanguage

string (undefined)

assert all provided namespaces are loaded before rendering the component (can be set too). Note that rendering will not be blocked again when dynamically updating the ns prop after initial mount.

pass i18next via options (useful for )

pass in initial translations (useful for )

pass in initial language (useful for )

t function
essentials
interpolation
formatting
plurals
globally
next.js usage
next.js usage
next.js usage