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.
Further reading
- React i18n: A step-by-step guide to react-intl
- How to properly internationalize a React application using i18next by Adriano Raiano
- Ultimate Localization of React (Mobx) App with i18next by Viktor Shevchenko
- Building i18n with Gatsby
I hope you’ve learned a few new things about i18next, React.js localization and modern localization workflows.
I hope you enjoy and happy coding! 🥑💖