How implementation a i18n in React App

First install library's

You need install all libs of react-i18next, i18next and i18next-http-backend

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

It's now create the config file in your src files React App

File with name i18n.js and this content below

import i18n from "i18next";
import backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

i18n
  .use(backend)
  .use(initReactI18next)
  .init({
    lng: "pt",
    fallbackLng: "pt",
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: 'languageChanged',
      useSuspense: false,
    }
  });

export default i18n;

Import this file i18n.js in your index.js of React App

Usage this imports file i18n.js and provider in your config App

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

And usage this provider in render App

 <I18nextProvider i18n={i18n}>
   <App />
 </I18nextProvider>

Example with index.js with provider and imports

Next example with implementation imports and provider in your React App

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.scss';
import App from './App';

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

it's good, now you need create your translate files and usage in yours components

Create Files of translate locales

In public folder do you need create this folder with name locales and in locales folder you create all folders for example en or pt or es names of your translate files
Inside your folder you need create a json with name translate.json with your translate ocurrences for example follow this json below

name file: locales/en/translate.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}

name file: locales/pt/translate.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}

name file: locales/es/translate.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}

Very good files with translates english, portuguese and spanish

It's now use your translate in components

Now do you need usage translate in component and create this a select or a button for changing language of locale with hook useTranslation

A example basic use in component with a select change of language

import React from 'react';
import { useTranslation } from 'react-i18next';

function AppLanguage() {
  const { t, i18n } = useTranslation();

  return (
    <React.Fragment>
      <h1>{t('title.config')}</h1>
      <select
        className="App-language"
        name="language"
        value={i18n.language}
        onChange={e => i18n.changeLanguage(e.target.value)}
      >
        <option value="pt">{t('languages.pt')}</option>
        <option value="en">{t('languages.en')}</option>
        <option value="es">{t('languages.es')}</option>
      </select>
    </React.Fragment>
  );
}

export default AppLanguage;

Finished you are a good hacker and your React App have a internalization with a lot languages and international access for many peoples in all the World, Good study for you and a nice #hacktoberfest

References

If do you need refences follow the list below with more examples

• The official site react-i18next
• A project working with real implementation Google React
• My profile in Github @lucasferreiralimax

Do you need help?

Comment or talk with me
I feel like help you and nice to meet you.