latest
legacy v9
useTranslation (hook)
What it does
It gets the
t function and i18n instance inside your functional component.1
import React from 'react';
2
import { useTranslation } from 'react-i18next';
3
​
4
export function MyComponent() {
5
const { t, i18n } = useTranslation();
6
// or const [t, i18n] = useTranslation();
7
​
8
return <p>{t('my translated text')}</p>
9
}
Copied!
While most of the time you only need the
t function to translate your content, you can also get the i18n instance (in order to change the language).1
i18n.changeLanguage('en-US');
Copied!
The
useTranslation hook 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
useTranslation hook inside your functional components to access the translation function or i18n instance.useTranslation params
Loading namespaces
1
// load a specific namespace
2
// the t function will be set to that namespace as default
3
const { t, i18n } = useTranslation('ns1');
4
t('key'); // will be looked up from namespace ns1
5
​
6
// load multiple namespaces
7
// the t function will be set to first namespace as default
8
const { t, i18n } = useTranslation(['ns1', 'ns2', 'ns3']);
9
t('key'); // will be looked up from namespace ns1
10
t('key', { ns: 'ns2' }); // will be looked up from namespace ns2
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
const { t, i18n } = useTranslation('ns1', { i18n });
Copied!
Optional keyPrefix option
available in react-i18next version >= 11.12.0depends on i18next version >= 20.6.0
1
// having resources like this:
2
/*{
3
"translation": {
4
"very": {
5
"deeply": {
6
"nested": {
7
"key": "here"
8
}
9
}
10
}
11
}
12
}*/
13
// you can define a keyPrefix to be used for the resulting t function
14
const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
15
const text = t('key'); // "here"
Copied!
Do not use the
keyPrefix option if you want to use keys with prefixed namespace notation:i.e.
1
const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
2
const text = t('ns:key'); // this will not work
Copied!
Not using Suspense
1
// additional ready will state if translations are loaded or not
2
const { t, i18n, ready } = useTranslation('ns1', { useSuspense: false });
Copied!
Not using Suspense you will need to handle the not ready state yourself by eg. render a loading component as long
ready === false . Not doing so will result in rendering your translations before they loaded which will cause save missing be called although translations exists (just yet not loaded).Last modified 2mo ago