Bonjour à tous ! 

Aujourd'hui nous allons voir comment rajouter facilement un système de traduction dans votre app React pour traduire tous vos contenus textuels (textes, boutons etc ... !) à l'aide du package i18n ! 

Commençons par installer nos 3 dépendances :

npm install i18next react-i18next i18next-browser-languagedetector

À la racine de votre projet dans 'src', vous allez créer le fichier i18n.js qui contiendra le code suivant :

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import { Language } from "./enums/Language";
import translationEN from './i18n/en.json';
import translationFR from './i18n/fr.json';

let defaultLanguage = Language.FR;

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  fr: {
    translation: translationFR
  }
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: defaultLanguage,

    keySeparator: ".",  // to support nested translations

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

  export default i18n;

Ce fichier est le cœur de la logique de traduction où l'on paramètre l'instance i18n.

Nous allons créer un fichier enum 'Language.ts' qui énumérera les différentes langues de notre application:

export enum Language {
    FR = "fr",
    EN = "en",
}

Vous pouvez maintenant créer un dossier 'i18n' dans 'src' qui contiendra nos fichiers de traductions ! 

Pour cet exemple, on aura fr.json et en.json :

{
	"common": {
        "translate-button": "FR",
        "translated-text": "C'est du français"
    }
}

{
	"common": {
        "translate-button": "EN",
        "translated-text": "This is english"
    }
}

Maintenant, nous allons indiquer à toute notre app que nous utilisons la traduction i18n en rajoutant dans le fichier 'index.tsx' l'import du dossier contenant nos traductions fr.json et en.json : 

import './i18n';

Pour tester notre traduction, je vous invite à créer un composant 'Lang.tsx' qui s'occupera de switcher de langue ! 

import React, { ChangeEvent, useState } from "react"
import { useTranslation } from 'react-i18next';
import { Language } from '../../enums/Language';

const Lang = () => {
    const { i18n } = useTranslation();
    const [lang, setLang] = useState<Language>(i18n.language as Language);

    let changeLanguage = (event: ChangeEvent<HTMLSelectElement>) => {
        let language = event.target.value;

        switch (language) {
            case Language.EN:
                setLang(Language.EN);
                i18n.changeLanguage(Language.EN);
                break;
            case Language.FR:
            default:
                setLang(Language.FR);
                i18n.changeLanguage(Language.FR);
                break;
        }
    }

    return (
        <div>
            <div>
                <select value={lang} name="language" onChange={changeLanguage}>
                    <option value={Language.FR}>FR</option>
                    <option value={Language.EN}>EN</option>
                </select>
            </div>
        </div>
    )
}

export default Lang;

Essayons-le dans notre application : pour ce faire, je vais l'appeler dans mon composant App.tsx (mais dans votre cas il sera probablement appelé dans vos propres composants) :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useTranslation } from "react-i18next";
import Lang from "./components/basics/Lang";

function App() {
  
  const { t } = useTranslation();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <Lang />
        <p>{t('common.translated-text')}</p>

      </header>
    </div>
  );
}
export default App;

Vous pouvez ainsi voir qu'à l'aide de 'useTranslation()' nous pouvons indiquer le chemin de traduction dans notre balise '<p>' et qu' i18n se chargera d'aller chercher la traduction correspondante dans nos fichiers en.json/fr.json selon la langue choisie ! 

J'espère que tout fonctionne pour vous et si vous avez des questions, vous disposez de l'espace commentaire où l'on s'occupera de vous répondre rapidement ! :) 

Happy Coding !