ReactIntl is a library that helps you with internationalization and localisation related tasks in your project.

Click here to share this article on LinkedIn »

Nice thing about it is that it tries to figure out thing in a platform way, under the hood it uses ECMA-402 API that its right now polyfilled with Intl.js and FormatJS

The way it works it supplies you with two main components IntlProvider and FormattedMessage. IntlProvider is responsible for setting up your locale and provide translated messages to FormattedMessage. FormattedMessage declares what is your resource text in your default language (reference language) and formats the message. Later in build process you can extract those declared message resources with babel plugin and send those extracted files to a translator.

You can use it the way an example from ReactIntl describes it, on a client you are passing messages from global variable already declared in your page that was downloaded from server

on the server side you emit your translated messages you received from translator in your index.html

When its OK to have all resources loaded up front, this solutions is perfect. The main advantage of it? you do not wait for resources to download. When you change language you simply reload your page with different locale.

When you have lots of modules that are loaded on demand, you do not want to download all resources at once, you have a problem. You have to maintain files with translation, this is a pain for developers and also for translators because they do not see translation context in xml, json of csv file.

I had this problem and that is why I came up with ReactIntl with namespaces… that can be loaded on demand. What are those namespaces you ask… the simple way to reason about it, its a group of translation what you want to load together when user loads a part of your application.

This project is inspired by Jan Mühlemann’s https://react.i18next.com.

With loading translations of demand, you have a lot of new possibilities, you can improve your translation process. You no longer have to sent translation files via email, or some chat and synchronize it manually. You do not have to extract untranslated messages from your app and send them to somebody for translation, your application can do it on its own.Translator can use your application and in-context editor with translation service to simply click on any part of your application and find what resource is responsible for a specific text. They can translate it, refresh a page, and see changes on the fly. they see if text fits on a screen and they see context.

When developers add new messages they are automatically uploaded to translation service and you can see what messages in want language are untranslated.

I will describe complete process I will use in future articles.

First translation service that is integrated with ReactIntlNamespaces is locize.com. Cool thing about it is that they have in-context editor and this editor has another cool feature, besides many others, it helps you work with messages in ICU format. This format is also supported in ReactIntl because ReactIntl is a part of FormatJS that uses ICU.

How ReactIntlNamespaces works? well, its on top of ReactIntl, it encapsulates IntlProvider inside IntlNamespaceProvider, derives FormattedMessage and on top of that adds IntlBackendProvider

Things you set normally on IntlProvider you can set on IntlBackendProvider, and with IntlNamespaceProvider you can split your resources apart and group them. Message ids are scoped, so two namespaces can have same id.

To make picture complete you need to hook up to some backend through helper class ResourceProvider that is responsible for coordination of resource download and notification process when download is completed, it also has some features like downloading resources for another language, it can check for new translation in given language.

I depends on implementation of ResourceServer interface, that currently has one implementation of locize.io api.

All we need to do is to configure our LocizeClient or any other ResourceServer implementation, wire it to out app with getMessagesFromNamespaceFactory and addMissingMessageFactory ant that is it.

In a future articles I will explain how to integrate locize-editor with it and what are some other cool features this library has.

As I’m writing it has version 0.1.0 its on npm:

if you find it interesting, leave a comment below or a github issue.

Peace!