I18n (render prop)

Last updated 2 months ago

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.

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 }) => (
<div>
<h1>{t('keyFromDefault')}</h1>
<p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
</div>
)
}
</I18n>
)
}

I18n props

options

type (default)

description

wait

boolean (false)

assert all provided namespaces are loaded before rendering the component (can be set globally too)

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