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.
This is a specific migration guide regarding the complete react-i18next rewrite in v10.
If you're looking for general release notes, please have a look in the CHANGELOG file.
The most obvious change is the hook function for 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>
}
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.
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:i18n.init({
react: {
useSuspense: false
}
});
The
I18nextProvider no longer provides as many properties as before. Make the necessary changes in your codebase after migrating.// New props
{
i18n,
defaultNS,
}
// Old props
{
i18n,
defaultNS,
reportNS,
lng: i18n && i18n.language,
t: i18n && i18n.t.bind(i18n),
}
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 1yr ago