Getting Started with Creating International React Apps

Image for post
Image for post
Photo by maggie bell on Unsplash

Many apps have to be made usable by different users from various parts of the world.

To make this easier, we can use the react-intl to do the internationalization for us.

In this article, we’ll look at how to get started with the react-intl library.

Getting Started

To get started, we install the package by running:

Then we can use the IntlProvider to our app to let us use it:

We have the translated messages in the messages object.

The keys are the locale.

Messages are taken from the messages object and passed into the messages prop.

Then we used the FormattedMessage component to display the message as specified by the ID.

values has the values for the placeholder.

name is the placeholder in the message, so that’s what we passed in.

Formatting Time

We can format time using the FormattedDate component.

For instance, we can write:

Then we get the formatted date formatted for any locale.

year sets the year format.

month sets the month format.

day sets the day format.

weekday sets the weekday format.

numeric means it’s displayed as a number.

long is displayed as the full word.

FormattedDateParts

There’s also the FormattedDateParts component to divide a date into their components.

This lets us have more customization in how to display the date.

For example, we can write:

to format our date parts with different formatting.

Then the first entry of parts is the month.

The 2nd is the comma.

And the 3rd is the day.

FormattedTime

To just show the internationalized time, we can use the FormattedTime component.

For example, we can write:

to show a formatted time.

FormattedTimeParts

Like with dates, we can divide the time into parts and format that.

We can use the FormattedTimeParts component to do that.

For example, we can write:

The parts array has the hour as the first entry.

The 2nd is the colon and the 3rd is the minute.

Image for post
Image for post
Photo by Suea Sivilaisith on Unsplash

Conclusion

We can add translations easily with the react-intl package.

Also, we can format the time the way we like.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store