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

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