latest
legacy v9
Translation (render prop)
What it does
The
Translation is a render prop and gets the t function and i18n instance to your component.1
import React from 'react';
2
import { Translation } from 'react-i18next';
3
4
export function MyComponent() {
5
return (
6
<Translation>
7
{
8
(t, { i18n }) => <p>{t('my translated text')}</p>
9
}
10
</Translation>
11
)
12
}
Copied!
While you most time only need the t function to translate your content you also get the i18n instance to eg. change the language.
1
i18n.changeLanguage('en-US');
Copied!
The
Translation render prop will trigger a Suspense if not ready (eg. pending load of translation files). You can set useSuspense to false if prefer not using Suspense.When to use?
Use the
Translation render prop inside any component (class or function) to access the translation function or i18n instance. Translation params
Loading namespaces
1
// load a specific namespace
2
// the t function will be set to that namespace as default
3
<Translation ns="ns1">
4
{
5
(t) => <p>{t('my translated text')}</p> // will be looked up from namespace ns1
6
}
7
</Translation>
8
9
// load multiple namespaces
10
// the t function will be set to first namespace as default
11
<Translation ns={['ns1', 'ns2', 'ns3']}>
12
{
13
(t) => <p>{t('my translated text')}</p> // will be looked up from namespace ns1
14
}
15
</Translation>
Copied!
Overriding the i18next instance
1
// passing in an i18n instance
2
// use only if you do not like the default instance
3
// set by i18next.use(initReactI18next) or the I18nextProvider
4
import i18n from './i18n';
5
6
<Translation i18n={i18n}>
7
{
8
(t, { i18n }) => <p>{t('my translated text')}</p> // will be looked up from namespace ns1
9
}
10
</Translation>
Copied!
Last modified 2yr ago