Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (44 sloc) 2.76 KB

I18n (render prop)

{% hint style="warning" %} Will be removed in the next major react-i18next version (v9.0.0).

The component can be replaced without changes with the new NamespacesConsumer render prop. {% endhint %}

The I18n 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.

{% hint style="info" %} 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, t, ready }) => (
            <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>

I18n 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
nsMode 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
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