Adding Multi-Language Support Using ReactJS

While developing an international website, there is a requirement to develop a website in multiple languages depending on the region or user-selected language. In this situation, using the react-i18next library, we can translate the website content into multiple languages.

First, we need to install the required npm packages in your project directory.

npm install i18next react-i18next --save

Also need to import another package i18next-xhr-backend . This package is used to store the translations of content in different files with respect to the different languages. So it is easy to add new languages. If you want to add a new language then just add the translations file for that language in the project directory.

• Create translation files

We create the translation files for different languages which we want to support on our website like English, German, Chinese etc.

We put that translation file in our public/assets/i18n/translations folder. In this folder, we create different json files for different languages.

First, we need to identify the language specific strings in our application which we need to change with respect to language.
For example, we create the translation file for default English language is src/assets/translations/en.json,

{

  "intro.label": "Hello",

  "thankyou.label": "Thank you",

  "details.label": "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop:is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop",

  "Advantages.label": "Advantages",

  "Advantagesdetails.label": "Flexibility to use other packages: Flexibility to use other packages"

}

For German language src/assets/translations/de.json,

{

  "intro.label": "Einführung",

  "thankyou.label": "Thank you",

  "details.label": "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop:",

  "Advantages.label": "Vorteile",

  "Advantagesdetails.label": "Flexibilität zur Verwendung anderer Pakete"

}

For Chinese language src/assets/translations/zh-HK.json,

{

  "intro.label": "介绍",

  "thankyou.label": "谢谢",

  "details.label": "是一个国际化框架，提供了一个完整的解决方案来将您的产品从Web本地化到移动和台式机：是一个国际化框架，提供了一个完整的解决方案来将产品从Web本地化到Web到移动设备和桌面",

  "Advantages.label": "优点",

  "Advantagesdetails.label": "使用其他软件包的灵活性：使用其他软件包的灵活性"

}

For Arabic language src/assets/translations/ar.json,

{

  "intro.label": "مقدمة",

  "thankyou.label": "شكرا جزيلا",

  "details.label": "هو إطار تدويل يوفر حلاً كاملاً لترجمة منتجك من الويب إلى الهاتف المحمول وسطح المكتب: هو إطار التدويل الذي يوفر حلاً كاملاً لترجمة منتجك من الويب إلى الهاتف المحمول وسطح المكتب",

  "Advantages.label": "مزايا",

  "Advantagesdetails.label": "المرونة في استخدام الحزم الأخرى: المرونة في استخدام الحزم الأخرى"

}

i18next configuration

First we create an i18n.js file in the src directory. The 118n.js file contains following configurations,

import i18n from "i18next";

import Backend from "i18next-xhr-backend";

import { initReactI18next } from "react-i18next";


i18n

  .use(Backend)

  .use(initReactI18next)

  .init({

    lng: "en",   //default language

    fallbackLng: "en", //when specified language translations not present 

//then fallbacklang translations loaded.

    debug: true,


       backend: {

      /* translation file path */

      loadPath: "/assets/i18n/{{ns}}/{{lng}}.json",

    },
 

/* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */


    ns: ["translations"],

    defaultNS: "translations",

    keySeparator: false,

    interpolation: {

      escapeValue: false,

      formatSeparator: ",",

    },

    react: {

      wait: true,

    },

  });


export default i18n;

• Component

There are multiple ways to load translations in the component you can refer https://react.i18next.com/latest/using-with-hooks

Here we give an example for using hook (useTranslation) and HOC (withTranslation).

• UseTranslation(hook)

While using functional components you can use the useTranslation hook. In your functional component, it gets the t function and i118n instance. t function is used to translate your content and i18n is used to change the language.

Lets create a component introduction with its content,

import React from "react";

import { useTranslation } from "react-i18next";


const Introduction = () => {

  const { t, i18n } = useTranslation();


  return (

    <div>

      <div style={{ textAlign: "center", fontWeight: "500" }}>

        {t("intro.label")}

      </div>


      {t("details.label")}

    </div>

  );

};


export default Introduction;

• withTranslation (HOC)

with translation is a higher-order component that gives function and i18n instance as props of the component. For more reference follow https://react.i18next.com/latest/withtranslation-hoc

import React from "react";

import { withTranslation } from "react-i18next";


const Advantages = ({ t }) => {

  return (

    <div>

      {t("thankyou.label")}

      {t("Advantages.label")}

      {t("Advantagesdetails.label")}

    </div>

  );

};


export default withTranslation()(Advantages);

After this, we need to pass the local name to the changeLanguage method of the i18n instance. We can pass the locale name of the language in which we want to show the content of our website. For that, we create a language selector component through which users can change the language.

import React from "react";

import { useTranslation } from "react-i18next";


const LanguageSelector = () => {

  const { t, i18n } = useTranslation();


  const changeLanguage = (event) => {

    i18n.changeLanguage(event.target.value);

  };


  return (

    <div onChange={changeLanguage}>

      <input type="radio" value="en" name="language" defaultChecked /> English

      <input type="radio" value="zh-hk" name="language" /> Chinese

      <input type="radio" value="de" name="language" />

      German

      <input type="radio" value="ar" name="language" /> Arabic

    </div>

  );

};


export default LanguageSelector;

Here is our app.js file

import React, { Component, Suspense } from "react";

import "./App.css";

import "./i18n";

import Introduction from "./Hello";

import Advantages from "./ThankYou";

import LanguageSelector from "./LanguageSelector";


const App = () => {

  return (

    <div>

      <Suspense fallback={null}>

        <LanguageSelector />

        <Introduction />

        <Advantages />

      </Suspense>

    </div>

  );

};


export default App;

While the translation file is loading or it takes time to load at that time withTranslation and useTranslation both will trigger the Suspense. If you don’t want to use Suspense then you can set useSuspense parameter to false. E.g

  const { t, i18n } = useTranslation( { useSuspense: false });

Or

const ExtendedComponent = withTranslation()(MyComponent);

<ExtendedComponent useSuspense={false} />

So you have added German, Chinese, Arabic language support for your website. Similarly, you can add multiple language support by adding a translation file for that language.