Internationalization In ReactJS Application Using i18Next

In this article, we will learn how we can implement internationalization in the ReactJS applications using i18Next. i18Next is one of the popular JavaScript frameworks to implement internationalization.

 

According to i18next.com, " i18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop." 

 

What is internationalization?

 

Internationalization is the process of translating the content of applications into different languages. Read more about Internationalization.

 

Create React Project

 

Let’s create a React.js project by using the following command

 

npx create-reatc-app multilangapp

 

Install needed dependencies

 

Open the newly created project in visual studio code and install i18Next in this project by using the following command

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

Install reactstrap and bootstrap in this project by using the following commands.

npm install  bootstrap   --save
npm install reactstrap react react-dom   --save

Now, go to the src folder and create a new component, name it 'i18n.js'. Open i18n.js file and add the following code.

import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
   .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: "en",
    debug: true,
    react: {
      bindI18n: "languageChanged",
      bindI18nStore: "",
      transEmptyNodeValue: "",
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ["br", "strong", "i"],
      useSuspense: false
    }
  });

export default i18n;

Open index.js file and add the following lines

import i18n from './i18n';
import 'bootstrap/dist/css/bootstrap.min.css';

Now, go to the Public folder and create three new folders.

 

• en folder -English
• hi folder-Hindi
• fr folder-French 

Inside each folder, create a JSON file. Now, open the en folder and inside it, create a JSON file named 'Language.json' and add the following code.

{
    "heading": "Welcome to india",
    "about": "About India",
    "lan":"Select Language",
    "detail":"India  is a country in South Asia. It is the seventh-largest country by area, the second-most populous country.India is a very beautiful country
}

Now open the hi folder and inside it, create a JSON file named 'Language.json' and add the following code.

{
    "heading": "भारत में आपका स्वागत है",
    "about": "भारत के बारे में",
    "lan":"भाषा चुनिए",
    "detail":"भारत दक्षिण एशिया का एक देश है। यह क्षेत्रफल के हिसाब से सातवाँ सबसे बड़ा देश है, दूसरा सबसे अधिक आबादी वाला देश है।भारत एक बहुत ही खूबसूरत देश है"
}

Now, open fr folder and inside it, create a JSON file named 'Language.json' and add the following code.

{
  "heading": "Bienvenue en Inde",
  "about": "À propos de l'Inde",
  "lan":"Choisir la langue",
  "detail":"L'Inde est un pays d'Asie du Sud. C’est le septième plus grand pays par sa superficie, le deuxième pays le plus peuplé.L’Inde est un très beau pays.
}

Now, create a new component Home.js file and add the following code in this component.

import React, { Component } from 'react'
import './App.css';
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';
import { useTranslation } from 'react-i18next';
const Home = () => {
  const { t, i18n } = useTranslation("Language");
  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };
  return (<div>
    <FormGroup row>
      <Col sm={7}>
      </Col>
      <Label className="lbl" for="name" sm={3}>{t("lan")}</Label>
      <Col sm={2}>
        <div className="btn-group">
          <Button color="success" onClick={() => changeLanguage('en')}>English</Button>
          <Button color="success" onClick={() => changeLanguage('hi')}>Hindi</Button>
          <Button color="success" onClick={() => changeLanguage('fr')}>French</Button>
        </div>
      </Col>
    </FormGroup>
    <h2 className="PageHeading"> {t("heading")}</h2>
    <div>
      <Container className="App">
        <Form className="form">
          <Col>
            <FormGroup row>
              <Label className="PageHeading" for="name" sm={2}> {t("about")}</Label>
              <Label className="Pagebody" for="address" sm={10}>{t("detail")}
              </Label>
             </FormGroup>
            </Col>
           <Col>
          </Col>
        </Form>
      </Container>
    </div>
  </div>

  );
}
export default Home;

Now, open the App.css file and add the following class in this file.

.PageHeading
{
  color:blue;
  background-color: lightgreen;
  margin-top: 20px;
}
.Pagebody
{
  color:blue;
  background-color: lightgreen;
  margin-top: 20px;
}
.lbl{
  text-align: right;
  color: blue;
}

Now, open App.js file and add the following code.

import React, { Component } from 'react';
import './App.css';
import AccordionSample from './Home';
import Home from './Home';
class App extends Component {
  render() {
  return (
    <div className="App">
      <div className="App">
       <Home />
      </div>
    </div>
  );
}
}
export default App;

Now, run the project by using the 'Npm start' command and check the result.

 

 

Click on "Hindi" and check the result.

 

 

Click on "French" and check the result.

 

 

Summary

 

In this article, we learned how we implement internationalization in ReactJS applications using i18Next.