Multi-Language Support in ReactJS

Multi-language support in React JS applications can be enabled by using API created through i18nexus. This is a very easy way to integrate your React project. i18nrxus already has the support of Google Translate which automatically changes the text to the respective languages. Very easily one can add a lot of languages to their projects just by writing a few lines of code.

Prerequisites

• React JS
• i18n library

Approach

Use the i18n library and link it to the React application to translate the data on the webpage for multi-language support. Add the option to switch between the languages and translate the data into the required languages.

Creating React Application:

Step 1: Create the react project folder, using this command in the terminal.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now we need to download all the dependencies of i18next

npm i i18next i18next-http-backend i18next-browser-languagedetector react-i18next

Project Structure

The project structure will look like this.

Dependencies list after installion all packages

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "i18next": "^23.6.0",
        "i18next-browser-languagedetector": "^7.1.0",
        "i18next-http-backend": "^2.2.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^13.3.1",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Steps to add a project on the i18nexus

Step 1: Follow the link https://app.i18nexus.com/ Create your own account by entering details like name, email, and teams name.

Step 2: After signing in you will be on the multi-language page, where you need to select the languages you want to add to the project.

Click on +Add Language and a drop-down will be there having a huge number of options.

After that, click on Open Project which will lead to the dashboard. For this project, we have selected the languages English, Hindi, Bengali.

Step 3: In the dashboard, we need to put the key to any unique value that we will use in the code, and for the value put the text you want to show. We can add a new key and value by clicking on the + sign on the top.

For this project, we put two keys choose and welcome with values like “please select a language” and “welcome to Geeksforgeeks”.

After that click on Export and versions.

Step 4: Now, on the page click on React tab and copy the entire code, this page contains your API key and load path. 

Example: In your working directory, create a file i18n.js, and in the file paste the entire code that we copied to configure the languages to the react project.

Javascript

import i18next from "i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const apiKey = ""; // Add ypur API key;
const loadPath = ``; // Add your loadpath;

i18next
    .use(HttpBackend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        // The default language
        fallbackLng: "en",

        ns: ["default"],
        defaultNS: "default",

        // Tt shows the supported languages
        supportedLngs: ["en", "hi", "bn"],
        backend: {
            loadPath: loadPath,
        },
    });

Example: We are creating a simple welcome page having a welcome text and a number of options of language to choose from which are here English, Hindi, and Bengali.

Javascript

// Filename - App.js

import React, { useState } from "react";
import { useTranslation } from "react-i18next";

// Contains the value and text for the options
const languages = [
    { value: "", text: "Options" },
    { value: "en", text: "English" },
    { value: "hi", text: "Hindi" },
    { value: "bn", text: "Bengali" },
];

function App() {
    // It is a hook imported from 'react-i18next'
    const { t } = useTranslation();

    const [lang, setLang] = useState("en");

    // This function put query that helps to
    // change the language
    const handleChange = (e) => {
        setLang(e.target.value);
        let loc = "http://localhost:3000/";
        window.location.replace(
            loc + "?lng=" + e.target.value
        );
    };

    return (
        <div className="App">

            {/* We are showing the value by using the
            keys we have created in the website */}
            <h1>{t("welcome")}</h1>
            <label>{t("choose")}</label>
            <select value={lang} onChange={handleChange}>
                {languages.map((item) => {
                    return (
                        <option
                            key={item.value}
                            value={item.value}
                        >
                            {item.text}
                        </option>
                    );
                })}
            </select>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: This output will be visible on http://localhost:3000/ on browser window

Reference: https://www.i18next.com/