I18n (render prop)

The I18n component passes t function to child function and triggers loading the translation files needed. Further it asserts the component gets rerendered on language change or changes to the translations themself.

To learn more about using the t function have a look at i18next documentation:

Sample usage

import React from 'react';
import { I18n } from 'react-i18next';

function TranslatableView() {
  return (
    <I18n ns={['defaultNamespace', 'anotherNamespace']}>
      {
        (t, { i18n }) => (
          <div>
            <h1>{t('keyFromDefault')}</h1>
            <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
          </div>
        )
      }
    </I18n>
  )
}

I18n props

options default description
wait false assert all provided namespaces are loaded before rendering the component (can be set globally too)
nsMode '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
bindI18n 'languageChanged loaded' which events trigger a rerender, can be set to false or string of events
bindStore 'added removed' which events on store trigger a rerender, can be set to false or string of events
i18n undefined pass i18next via options (useful for next.js usage
initialI18nStore undefined pass in initial translations (useful for next.js usage
initialLanguage undefined pass in initial language (useful for next.js usage

results matching ""

    No results matching ""