6 easy steps to localize your React Application — Internationalization with i18next

Localizing a react application has become an easy task with i18next’s react implementation. In this article I will show you the easiest way to localize a small scale application, which includes translated content for different languages, and user selection of language

React and i18next helps in localizing app content

About Internationalization -

It is the process of design and development of application in such a way that it can be easily readable and usable by all kinds of people across the world. There are over 300 npm packages on i18. It is just different implementation of the same process, some are feature rich, some caters specific needs. The one which I am going to discuss here is i18next, it is a very old library, but still rich in features, and I am being specific to React, therefore I choose i18next because its have its own react implementation, which makes our job more easier.

Benefits :

By localizing our application, we delivers customized content to the user according to their cultural and language preferences. If you are thinking it is all about translating the language to their local language, its not. In fact it is much more than that, it also includes plurals — in certain languages there are many type of plurals, so converting the content in the way which they would see their local language content would definitely enhance user experience. It also features showing the date-time according to the standards which they follow in their country, in some regions the date is represented as MMM dd YYY, In some other regions it is represented as dd/MM/YYYY. It is definitely not an easy task to format each and every date and time representation according to the standards present in the country where the user belongs to, but with the process of internationalization we make it possible without much hassle.

About i18next -

It is an internationalization-framework, based on pure JavaScript which offers a complete solution to localize your product from web to mobile and desktop. You can read more about i18next here

Advantages:

• Plugins to detect the user language
• Load translations
• Optionally cache the translations
• Flexibility to use other packages eg: moment.js for date formatting
• Scalability — Option to separate translations into multiple files and to load them on demand

Packages:

• i18next — a localization framework in javascript
• react-18next — React implementation of i18next library

Usage:
Since I am focusing on localization of react application, I am discussing how to use i18next in a react application.

Create a react app by any way which you prefer, and install i18next packages

npm install i18next react-i18next --save

Simple Usage

I am going to create a small single page application which have some contents

Application home page

My requirement is to localize the content of the above app. I will explain a very simple way to do so.

1. Create an i18n.js file in the root of your project folder
2. This file should contain all the translations for your application

3. Now in index page of the react app, we have to import the i18n file and pass it as a prop to I18nextProvider component, which wraps the entire application

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import App from "./app";
// wrap the app in I18next Provider with the configuration loaded from i18n.js
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>,
document.getElementById("root")
);

4. Almost everything is done, we can now use the translations, remember the english sentences which we use as content is the key for translation and we have to provide multiple language version of the key, as described in the i18n.js file

What happens in the background is simple, inorder to use i18next in our application we need to initialize it using init method, which accepts different properties as its arguments, the common ones are :-

• fallbackLng — the fallback language to be used, in case some translations are not defined in the file
• debug — It logs to console all the states of i18nxt, which helps in debugging, you may need to set it to false in production environment
• resources — it is a json object, a collection of all the translations needed for the application, since this is very easy way to implement i18 , I have hardcoded all the contents necessary for the app.
• react — react 18next configurations properties object

After wrapping up our main component this becomes so easy.. We can just use the t function, just put the content inside the t function, which serves as key for other languages

{t("Introduction")}

Now we need a way to change the language, lets implement some radio buttons

Radio buttons for user to select language

5. We need to hook up a state in our app component, in order to work with the selection of languages, initialize a state with default value of en, remember the value must be equal to that we specify in i18n.js file.

state = {
value: "en"
};

6. Define a handleChange method which changes the language

handleChange = event => {
console.log("selected val is ", event.target.value);
let newlang = event.target.value;
this.setState(prevState => ({ value: newlang }));
console.log("state value is", newlang);
this.props.i18n.changeLanguage(newlang);
};

Note that we have used i18n.changeLanguage() method, it accepts new language as a parameter and it automatically gets all the translations from i18n.js file for all the keys provided.

Final Preview of the app

Here is a sandboxed version of the app, fell free to fork and experiment on your own.

Live version of the app

Separated Translations

Nobody likes to hardcode all the translations in a single file especially when the project size is large, therefore we need to seperate the translations to a separate file.

1. Create a folder named locales in root of the project, and create a sub folder named “<key>” for each language
2. Create translation.json file in each language folder, and place all the translations in this file
3. Install the package i18net-xhr-backend

npm install --save i18next-xhr-backend

4. Modify the i18n.js file to load the translations from the necessary files

5. Yayy!!! The app is ready and working..

The only disadvantage with the above approach is whenever there is a change in translation, you need to rebuild the project and deploy.

App Preview Here..

Conclusion

i18next is a powerful solution which helps in localization of your application, In this article I just showed you how to localize a react application. To our aid i18next is having its React implementation.

If you like my article, click that 👏 button, and share my article.

Your support and feedback means so much to me.