Today, we’ll briefly talk about the configuration necessary in order to have custom formatters in react-intl.

React-intl is a package developed for React by the team at Yahoo, and part of the FormatJS project, that strives to use as much of the standards as possible when it comes to internationalization.

As we usually target French and English languages in our applications and projects, internationalization is very important to us, and so you’ll probably find more of this kind of articles in the future.

In react-intl, the more idiomatic way to prepare anything for internationalization is to use the React components it provides. When it comes to numbers, the FormattedNumber is the way to go to print numbers that will be formatted according to a specific culture. That implies the decimal formatting, as well as the grouping, etc.

Here is what a basic number formatting looks like with react-intl:

The result in French should be something like “1 234 567 890”, as we use spaces to separate our groups, while it should look like “1,234,567,890” in English.

Let’s say for instance that you simply want to turn off number grouping, for some reason. Since this example is quite simple, but still an interesting use case, this is what I’ll use for this article.

When you are only printing out a number, it’s quite easy to achieve this result. We’ll actually be formatting our number using the standard JavaScript Intl API, and it has a property called “useGrouping” to do just what we want. Since the React element is all about formatting numbers, it supports that property directly, as an attribute:

This achieves what we want, and the number is displayed as a single string of numbers: “1234567890”.

But what if we want to display such number in the middle of a translatable string? We could display the number using the same element between two message elements, but that would harcode the position of the number in the string, which might not work with all languages.

The react-intl FormattedMessage element allows us to provide parameters and their type, but you cannot inline your format, and the element does not understand the NumberFormat Intl formats directly:

Even if we tried to provide a “useGrouping” property, it would be ignored by the element. Usually, we write the format to use as the third parameter of the variable value in the formatted string, but in our case, there’s none that fits our needs!

defaultMessage="We want to have {howMany, number, ???} things!"

So what we need to do is write our custom format for number, and pass it to the IntlProvider we use. The format object is pretty simple to create: You simply create an object with your format options and give it a name, then add it in the format type it belongs to, and provide that whole object to the IntlProvider:

With that, the only thing left is to add our custom format as a parameter of the FormattedMessage content:

I hope you have a better understanding of how custom formats work in the react-intl context! We publish new articles like this one each Friday, not always about React or internationalization! Don’t forget to subscribe if you liked this article, and see you next week!