In a fast moving world, places change, borders change, demographics change. We don't want to be like a dead fly regretting what we didn't do in our short time on this earth. So maybe its a time to make a decision, it is important to know how to make your application internationalizable. In this post, we will look at how to internationalize React app and the different libraries you can use to do that.

So it begins

App internationalization is the process of making your app's content available in multiple languages in order to reach more customers and truly globalize your app's potential. Most businesses avoid internationalization because they believe it is too difficult and time-consuming to implement. You can truly increase the accessibility, reach, and scope of your app by integrating app localization and internationalization processes.

🌐 What does I18N mean? Whenever looking at content talking about translations you might come across the weird word “i18n”. This is a term short for “internationalization”. “i” + 18 letters + “n” = internationalization 🤷‍♀

How React Internationalization helps identify user locale

There are three identified ways of detecting a user’s locale:

Browser’s navigator. languages (on the client object)
Geolocation via user’s IP address (on the server)
Accept-Language HTTP header (on the server)

Internationalization in React

The process of designing a product — in this case, a React app — to be used in different locales is known as internationalization (Intl or i18n are common abbreviations).

Localization, also known as l10n, is the process of translating an internationalized app from its original language to a target language.

But, translation is more than just changing the language of a text or message. Differences in how numbers and dates are written, as well as how units and currencies are placed for different locales, must be taken into account.

There are numerous internationalization libraries available to assist us with the time-consuming task of supporting multiple languages.

React-intl

One the most popular libraries, is part of FormatJS collection. It supports more than 150 language.

It can handle common locale setting such as date and time, currency, and numbers without effort.

It has also a great documentation you can check here.

React-intl-universal

This libraryis built by Alibaba Group and is based on react-intl library. The difference is that this library enables even the non-React components to make use of it by providing a singleton object to load the locale.

It is also simple to use and you can handle numbers, currency, and dates without having to install any other package.

react-18next

Probably most popular and well-known internationalization library that is built on i18next. It is compatible with both React and React-Native applications.

It allows for server-side rendering. It aims to be a complete i18n solution, with support for various plugins (backend translations, locale cache, and so on) that supplement the original package.

It is not limited to React and can be used in other applications as well.

Translations are stored in .json files in the library's official example:

//en-translation.json 
{
  "hello": "Hello",
  "goodbye": "Goodbye!"
}

//ua-translation.json

{
  "hello": "Добрий день",
  "goodbye": "Допобачення!"
}

Here are some interesting facts about React-i18next.

It’s optimally suitable for server-side rendering.
It includes multiple plugins that detect various languages load translations of multiple languages.
You have the option to cache the translations.
It’s more flexible than other i18n libraries when it comes to integration with other packages.
It’s based on i18next which is not limited to React. Hence learn once and use everywhere.
i18next supports translation management tools such as locize.com.
https://www.youtube.com/watch?v=ds-yEEYP1Ks

Developer Avocado Blog