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:

Code-based:

  • High setup difficulty
  • Good performance
  • High Customizability

Headless CMS:

  • High setup difficulty
  • Good performance
  • High Customizability

 

Automated Service :

  • Low setup difficulty
  • Performance varies
  • Low Customizability

In this blog, we will see how to implement localization in React applications with a Code-based approach.

List of available libraries for localization in React application:

  1. i18n-react
  2. react-localization
  3. react-localize
  4. react-localize-redux

What is react-localization?

The react-localization is a powerful npm library for providing internationalization support to our React application.

The below graph shows downloads of react-localization compared to other libraries available for localization over the past year.

 Downloads of react localization compared-to other libraries over the past year
Image Source: npm trends

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

Get a Full Demo On GitHub

coma

Conclusion

In this blog, we saw different approaches to localizing React applications and their use cases. And how to add localization in React application with a code-based approach using the react-localization library. We saw the implementation steps of react-localization. Then at last we saw the advantages of using react-localization.

Nadeem K

Associate Software Engineer

Nadeem is a front-end developer with 1.5+ years of experience. He has experience in web technologies like React.js, Redux, and UI frameworks. His expertise in building interactive and responsive web applications, creating reusable components, and writing efficient, optimized, and DRY code. He enjoys learning about new technologies.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!