Mastering react-localization: A Comprehensive Tutorial

In this blog, we will see how to add localization to React applications. As you explore deploying your application to a worldwide audience, there are several factors to consider. To begin with, translating the text on your app is crucial to supporting the numerous non-English speaking users worldwide and opening up new markets.

Prerequisites

We are considering that you have a good understanding of React.js components and npm libraries.

Getting Started

Different Approaches to Localization in React

There are several approaches out there for implementing localization in React applications. Which approach we should use totally depends on the below factors:

🔹 Who is responsible for the text on your app?
🔹 How frequently does the text change?
🔹 Who does the translation?
🔹 How important is website performance?
🔹 Do you need to integrate with any other systems like CMS, etc?

Based on the upper factors we have three approaches to implementing localization in React applications:

1. Code-based approach
2. Headless CMS approach
3. Automated service approch

Let’s discuss a little bit about these approaches:

react-localization Implementation Steps

Step1. Create React Application:

First, create a react application with the below command.

npx create-react-app react-localization-app

Step 2. Install Necessary Module:

Import react-localization with the below command.

npm i react-localization

Step 3. Create Language Context:

Now create a component folder where we add all reusable components that we need in this project. And here create another folder Context. Inside this folder create the LanguageContext.js file. In this file, we will create a LanguageContextProvider using the useContext hook.

import React, { useState, useContext } from "react";

const LanguageContext = React.createContext();
export const useLanguageContext = () => useContext(LanguageContext);

export default function LanguageContextProvider({ children }) {
const [language, changeLanguage] = useState("en");
return (
<LanguageContext.Provider value={{ language, changeLanguage }}>
{children}
</LanguageContext.Provider>
);
}

Here the language is the state that contains the current language code value.

Step 4. Create Localization for Translated Data:

Now create another folder inside the src directory. Inside this folder create a .js file of all the languages that we want. For example, we want to translate our website into English, Hindi, Germany, and France.

So for that, we need to create en.js, hn.js, de.js, and fr.js. All the files basically export one object inside this object, we have a translation of all the content of our website that we want to translate. And with the help of the keys, we will use this content on different pages. Below you can see an example of an en.js file:

export default {
homePara:
"Hello this is Nadeem Khan. In this demo project I have shown how to implement localization in a react project. Language localisation is the process of adapting a product's translation to a specific country or region. It is the second phase of a larger process of product translation and cultural adaptation to account for differences in distinct markets, a process known as internationalization and localisation.",
aboutPara:
"This tutorial is targeted to make localization simple. Though there are a lot of tutorials available on the internet. But, this one will teach you the concept in a simple manner. You can directly use this code for your software. I have used 'React' hooks which is a software industry standard now. {0}",
changeLanguage: "Change your language",
name: "Name",
age: "Age",
address: "Address",
contactNo: "Contact No",
save: "Save",
formPara: "Please, enter your personal details here.",
dynamicValue: "Dynamic Value- {randomNumber} {date}",
};

Step 5. Create a Custom Hook for Translation:

Inside the src directory create a customHooks folder and inside this folder, we are defining our custom hook useTranslation. This hook is basically responsible for returning the currently selected language objects that have been created in the localization folder.

import React, { useState, useContext } from "react";
import LocalizedStrings from "react-localization";
import localization from "../../localization";
import { useLanguageContext } from "../contexts/LanguageContext";

export default function useTranslation() {
const { language } = useLanguageContext();
let translation = new LocalizedStrings(localization);

translation.setLanguage(language);
return translation;
}

Here we have imported LocalizationString from the react-localization library that is the Class. Then we created an instance of this class translation. With the help of the setLanguage method, we are changing the language and returning it as nothing but the updated language’s object.

Step 6. Create a Select Field for Changing the Language:

Now, we need to select a field for changing the language. For that, we will create the component LanguageHandler.js inside the components folder. Inside this file, we have one select field, and onChange of this select field we will change that language state from context by passing the selected language code value in the changeLanguage function that we are getting from the useLanguageContext hook.

import React from "react";
import { useLanguageContext } from "./contexts/LanguageContext";

export default function LanguageHandler() {
const { language, changeLanguage } = useLanguageContext();

return (
<select value={language} onChange={(e) => changeLanguage(e.target.value)}>
<option value="en">En- English</option>
<option value="it">It- Italian</option>
<option value="hn">Hn- Hindi</option>
<option value="de">De- Germany</option>
<option value="fr">Fr- France</option>
</select>
);
}

Step 7. How to Implement on Pages:

Now, we are all set to use the localization feature. Let’s take one example of a home.js page. Suppose, whenever we change the language in the language select field the language of the home.js should change. Here we simply use the useTranslation hook that we have created inside the customHooks folder. This hook basically returns the object of translation data of the currently selected language.

import React from "react";
import useTranslation from "../components/customHooks/translations";

export default function Home() {
const translation = useTranslation();
return (
<div>
<h2>Home Page</h2>
<div>{translation.homePara}</div>
</div>
);
}

Likewise, we can simply use it on different pages.

Advantages of react-localization

✔️ React-localization is a Simple module to localize the React Application
✔️ Performance is good
✔️ It provides high customizability support