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 cautious before release.

New in v10

Most obvious the hook function to use inside functional components:

import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const [t, i18n] = useTranslation();
return <p>{t('my translated text')}</p>
}

Components without replacement

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

Migration

Replace your components like described below. Not having to use Suspense in your existing App you can set useSuspense: false in react.init options.react:

i18n.init({
react: {
useSuspense: false
}
});

Components v9 -> v10

Type

v9

v10

hook

-

useTranslation

HOC

withNamespaces

withTranslation

render prop

NamespacesConsumer

Translation

i18next plugin

reactI18nextModule

initReactI18next

Provider

I18nextProvider

I18nextProvider

Complex Translation

Trans

Trans

Interpolations

Interpolate

Trans