Migrating v9 to v10
v10 is a complete rewrite, taking the chance to clean up some complexity added from v1 to v9.
This means you will need to test your application more cautiously before release.

New in v10

The most obvious change is the hook function for use inside functional components:
1
import React from 'react';
2
import { useTranslation } from 'react-i18next';
3
4
export function MyComponent() {
5
const [t, i18n] = useTranslation();
6
7
return <p>{t('my translated text')}</p>
8
}
Copied!

Components without replacement

The Interpolation component (which was marked as deprecated for a long time and replaced by the Trans Component) was removed finally. You will need to replace it with the Trans Component.

Migration

Replace your components like described below. If you don't have to use Suspense in your existing App you can set useSuspense: false in react.init options.react:
1
i18n.init({
2
react: {
3
useSuspense: false
4
}
5
});
Copied!

I18nextProvider changes

The I18nextProvider no longer provides as many properties as before. Make the necessary changes in your codebase after migrating.
1
// New props
2
{
3
i18n,
4
defaultNS,
5
}
6
7
// Old props
8
{
9
i18n,
10
defaultNS,
11
reportNS,
12
lng: i18n && i18n.language,
13
t: i18n && i18n.t.bind(i18n),
14
}
Copied!

Components v9 -> v10

Type
<= v7 (v8)
v9 (v8)
v10
hook
-
useTranslation
HOC
translate
withNamespaces
withTranslation
render prop
I18n
NamespacesConsumer
Translation
i18next plugin
reactI18nextModule
reactI18nextModule
initReactI18next
Provider
I18nextProvider
I18nextProvider
I18nextProvider
Complex Translation
Trans
Trans
Trans
Interpolations
Interpolate
Interpolate
Trans
Last modified 2yr ago