Simple Guide to React Js Internationalization

Hello and Namaste !

Hope you are doing good.

The purpose of this story is to guide developers to easily implement Internationalization in React.js.

Internationalization (sometimes shortened to “I18N , meaning “I — eighteen letters -N”) is the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localization.

Source: https://whatis.techtarget.com/definition/internationalization-I18N

We will make use of “react-i18next”.

1. Create a React App

To create react app, we can use command as below:

npx create-react-app react-internationalization

The npx Node.js Package Runner

2. Install required dependencies

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

React App for this story

We will create a simple React app that will be as shown below:

We will have the option to select multiple languages. Based on language selected, the title, option label and sample text changes.

3. Create i18n and configure

4. Create locales folder for languages

Create locales folder inside public folder in React app. Inside the locales folder, create folder for each language (use language code for folder name for better readability, eg.: en for English) and in each of these folders, create translation.json file.

We will only use three languages for this story; English (en), Nepali (np) and Japanese (jp).

This translation json is not restricted to what we have used. We can modify, remove or add our own fields and values here.
Translation json is what is referred by i18n to change text language in application.

5. Import i18n and add Suspense in index.js

6. Work on App.js

Import useTranslation from react-i18next.

import { useTranslation } from "react-i18next";

Initialize t and i18n from useTranslation inside the react component.

const { t, i18n } = useTranslation();

Create a method to change language in i18n.

const changeLanguage = (language) => {
  i18n.changeLanguage(language);
};

Use t to use values from translation json based on language selected.

<p>{t("title")}</p>
<p>{t("select-label")}</p>
<p>{t("description.sample-text")}</p>

Pass in language code (en/jp/np: represented by folder name in locales folder) to changeLanguage method on changing select.

<select
  name="languages"
  id="languages"
  onChange={(e) => changeLanguage(e.target.value)}>
 <option value="en">English</option>
 <option value="np">Nepali</option>
 <option value="jp">Japanese</option>
</select>

7. Run the application

npm start

Demo

Github link: https://github.com/umes4ever/react-internationalization

Happy learning !