Setup ReactJs with i18n

reactJs(i18n)

Hello everyone, in this tutorial we will integrate internationalization i18n with a ReactJs application in a few simple steps.

Note: I assume that you have node/npm installed in your environment.

1. Create a reactJS application :

npx create-react-app react-multilang

2. Install i18next packages :

npm i -save i18next i18next-xhr-backend i18n-brower-languageDetector react-i18next

3. Create the following folder structure :

pulic/locales/en/tranlation.json
pulic/locales/fr/tranlation.json
src/helpers/i18n.js

P.S : — you can add as many translations as you wish. fill the translation files :

a. Helpers/en/translation.json

{
  "home": {
        "mainTitle": "An Example of react with i18n",
        "text": "Hello I am a text to be translated",
        "description": "I am a paragraph"
       }
}

b. helpers/fr/translation.json

{
  "home": {
      "mainTitle": "Exemple de React avec i18n",
      "text": "Bonjour je suis un texte à traduire",
      "description": "Je suis un paragraph"
    }
}

4. Initialize our language translator package in src/helpers/i8n.js

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-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({
fallbackLng: 'en',
debug: true,
});
export default i18n;

5. import i18n.js into the index.js file

import './helpers/i18n';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

6. Now let’s test the implementation of i18n in our application. Within app.js add

import React, { Suspense } from 'react';
import './App.css';
import { useTranslation } from 'react-i18next';
function Page() {
   const { t } = useTranslation();
   return (
     <div>
       <h1>{t('home.mainTitle')}</h1>
       <h3>{t('home.text')}</h3>
       <p>{t('home.description')}</p>
     </div>
    )
}
function Header() {
   const { i18n } = useTranslation();
   const handleChange = (lang) => {
       i18n.changeLanguage(lang);
   }
return(
   <div>
      <button className="btn" onClick={e =>           {handleChange('en')}}>EN</button>
      <button className="btn" onClick={e => {handleChange('fr')}}>FR</button>
   </div>
)}
function App() {
  return (
     <Suspense fallback="Loading ..." >
       <Header/>
       <div className="App">
          <Page />
       </div>
      </Suspense>
    );
}
export default App;

Results

Hope you found this article helpful, thank you for reading.

Github source code here