How to Implement Multi-Language in React?

In today’s globalized world, having a multilingual application can significantly enhance user experience and expand your reach. React, being a popular front-end framework, offers multiple ways to implement multi-language support efficiently.

To add multi-language support to a React project, use the react-i18next library, one of the most popular internationalization (i18n) libraries. Set up translation files in JSON format and configure them with i18next, specifying a default language. Use the useTranslation hook to access translations within components. To switch languages dynamically, use i18n.changeLanguage() in React.

Pre-requisites

• React.js Project Setup
• Basic Knowledge of React

Now, create the utils directory at the root folder of the project.

Steps to implement multi-language support in a React project:

Step 1: Translation Files

Create translation files containing key-value pairs of text used in the project.

Here we create 2 JSON files for 2 different languages. The first is for English and the second is for Japanese. 

file: en.json 

{
   “Hello, Welcome to my site”: “Hello, Welcome to my site”
}

file: jp.json

{
    “Hello, Welcome to my site”: “こんにちは、私のサイトへようこそ”
}

Step 2: i18next Configuration

Set up and configure i18next for the React project. Create an i18n.js file in the utils file like below.

File: i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enTranslation from "./en.json";
import jpTranslation from "./jp.json";

i18n.use(initReactI18next).init({
    resources: {
        en: {
            translation: enTranslation,
        },
        jp: {
            translation: jpTranslation,
        }
    },

    lng: "en",
    fallbackLng: "en",
    interpolation: {
        escapeValue: false,
    },
});
export default i18n;

import this file to your project main file either app.jsx or index.jsx

File: App.jsx

// other import
import “./utils/i18n”;
// remain code

Step 3: Language Switching and Interpolation

Enable language switching based on the user’s location and preferences. Also, dynamically insert translated content using interpolation.

Now we can use translation like this.

// some component file

const {t, i18n} = useTranslation();
const handleButtonClick = () => {
    i18n.changeLanguage(“jp”);
}
return (
    <p>t(“Hello, Welcome to my site”)</p>
    <button onClick={handleButtonClick}>Switch</button>
);

Conclusion:

Implementing multi-language support in a React app is simple with react-i18next. With this setup, your React application is ready to serve users in multiple languages!

If you face any difficulty while implementing multi-language in React, comment below or you can take help from experienced React developers.

Happy Coding!