Internationalization is the term used for making a website suitable for multiple locales (i.e. one or more places and/or languages).

Internationalization is oftentimes shortened to i18n as it starts with an “i”, ends with an “n” and there are 18 other characters in between. Developers just love their abbreviations, don’t they?

A good internationalization framework should provide a decent DX (developer experience) without taking up a lot of implementation time.

The library this article presents is called React Intl. With more than 800,000 monthly downloads it’s one of the most used tools for internationalization in the world of React.

React Intl can do a lot more than just choosing messages/strings based on the locale. It can also format numbers and dates based on it! In this article, however, only the messages aspect of it is covered as this is what most people are mainly looking for.

React Intl will now be presented in the context of a React app bootstrapped with create-react-app, using English and German as demo languages.

The repository with the working code can be found here: https://github.com/adamkss/react-intl-demo.

1. Adding the dependencies

First of all, react-intl has to be added as a dependency by running: yarn add react-intl.

We also need one more dependency to add, and that is extract-react-intl-messages. This development depndency will be used to extract the internationalized messages into their own language files. Thus, run: yarn add -D extract-react-intl-messages.

In order for extract-react-intl-messages to work, make sure to also create a .babelrc file in the root of your project with the following content:

{
    "presets": ["react-app"]
}

#web-development #reactjs #react