Internationalization react-i18next

React¹⁷.0.2, react-i18next¹¹.11.0, i18next²⁰.3.2, Created at July 21, 2021, Read Series…

18next is an internationalization-framework written in and for JavaScript.

react-i18next i18next

npm install react-i18next i18next --save
npm install i18next-http-backend i18next-browser-languagedetector

src/i18n.ts

[Try to understand] Backend module in i18next-http-backend will load translation from default path: /locales/{{lng}}/{{ns}}.json.
[Try to understand] LanguageDetector, initReactI18next

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
// used for supported languages
export const supportedLngs = ['en', 'es'];i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: "en",
    supportedLngs: supportedLngs,
    fallbackLng: 'en',
    lowerCaseLng: true,
    debug: false,
    fallbackNS: false,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });export default i18n;

public/locales/en/UIStringResourcePerApp.json

[Try to understand] The translation .json format: “{key}”: “{translation}”

{
  "Application_Title": "React17MUI4",
  "Application_Description": "React17MUI4 Description"
}

<Suspense> in src/index.tsx

[Try to understand] i18n translations might still be loaded by the http backend, wrap origina tags with react’s <Suspense />.

ReactDOM.render(
  <Suspense fallback={<div>...</div>}>
{// original tags}
  </Suspense>,
  document.querySelector('#root'),
);

Example in src/App.tsx

[Try to understand] useTranslation(‘{ns}’), t, i18n, and t(‘{ns}:{key}’)

import { supportedLngs } from './i18n';
import { useTranslation } from 'react-i18next';
...
export default function App() {
  // Usage in function component
  const { t, i18n } = useTranslation(["UIStringResourcePerApp"]);
  // UIStringResourcePerApp is UIStringResourcePerApp.json
  document.title = t("UIStringResourcePerApp:Application_Title");
  ...
  // Usage in return(...) statement
  return (
           current language: {i18n.language}. languages:
            {supportedLngs.map((lng: string) => {
              return (
                <>
                  {lng},
                </>
              );
            })}
  );
}

Github commits is here: Basic-1.3. i18next

Conclusion

i18next and react-i18nextcan adapt to the needs of the developers, flexible and scalable, allows us to separate translations into multiple files and to load them on demand. It also contains a rich ecosystem that consists of a large number of modules.