# Source: https://react.i18next.com/legacy-v9/namespacesconsumer.md

# NamespacesConsumer (v9)

{% hint style="info" %}
Was introduced in v8.0.0. Not available in older versions.
{% endhint %}

The NamespacesConsumer is a so called render prop. The component passes the [**t** function](https://www.i18next.com/overview/api#t) 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.

{% hint style="info" %}
To learn more about using the **t** function have a look at i18next documentation:

* [essentials](https://www.i18next.com/translation-function/essentials)
* [interpolation](https://www.i18next.com/translation-function/interpolation)
* [formatting](https://www.i18next.com/translation-function/formatting)
* [plurals](https://www.i18next.com/translation-function/plurals)
* ...
  {% endhint %}

## Sample usage

```javascript
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)                   | <p>assert all provided namespaces are loaded before rendering the component (can be set <a href="i18next-instance">globally</a> too).<br><br><em>Note that rendering will not be blocked again when dynamically updating the <code>ns</code> prop after initial mount.</em></p><p><strong>In most cases you like to set this to true.</strong> If not handling not ready by evaluating ready.</p> |
| nsMode             | string ('default')                | <p><em>default:</em> namespaces will be loaded and the first will be set as default<br><br><em>fallback:</em> namespaces will be used as fallbacks used in order provided</p>                                                                                                                                                                                                                     |
| 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](https://github.com/i18next/react-i18next/tree/v9.x.x/example/nextjs))                                                                                                                                                                                                                                                                        |
| initialI18nStore   | object (undefined)                | pass in initial translations (useful for [next.js usage](https://github.com/i18next/react-i18next/tree/v9.x.x/example/nextjs/pages/index.js#L29))                                                                                                                                                                                                                                                 |
| initialLanguage    | string (undefined)                | pass in initial language (useful for [next.js usage](https://github.com/i18next/react-i18next/tree/v9.x.x/example/nextjs/pages/index.js))                                                                                                                                                                                                                                                         |