Firstly, when it comes to translating, the order of the words is important, as well as the formatting of dates and names. Grouped together, these things are known as “locale data”.

Installing react-intl is simple enough, but there are a few additional steps you need to complete after the initial yarn add react-intl . Let’s go over them now.

Babel

I’m going to illustrate how to do this with Babel and Webpack. First, install the babel-plugin-react-intl plugin ( yarn add babel-plugin-react-intl ). It will extract the strings marked for translation. To activate the plugin, you have to then add its name to your .babelrc file.

"plugins": [

...,

["react-intl", {

"messagesDir": "./src/translations",

"enforceDescriptions": false

}],

...

]

In the example above, react-intl will extract tagged messages into src/translations . The messages are stored in JSON files, inside directories that are named after your components.

When it’s time to send the messages to a translation service, you will probably want all of them in a single file. For this reason, the creators of the library have written a script that you can use to combine all the strings into a single file. To see a more detailed example, see this post.

Locale Data

The locale data for each language is provided and imported independently so you’re only sending down what you need. In the following example, we’re importing the locale data for English and German.

import { addLocaleData } from 'react-intl'

import enLocaleData from 'react-intl/locale-data/en'

import deLocaleData from 'react-intl/locale-data/de'

So the process is:

Install the library Install the babel plugin Import the locale data

Finally, you wrap your root component with IntlProvider , so that all the translated messages and locale data can be loaded into the React Intl Components used by your app.

<IntlProvider locale="de" messages={messages}>

<Root />

</IntlProvider>

Another method is to inject these values right into the intl reducer during the “boot up” part of your app’s lifecycle, like index.js or a configureStore method.

{

...,

intl: {

defaultLocale: 'en',

locale: 'en',

messages: allMessages.en

},

...

}

Formatting with React-Intl

The heart of react-intl is its tagging system. You can tag (or mark) strings for translation by wrapping them in a React component or using the API.

A React Component

import { FormattedMessage } from 'react-intl' <FormattedMessage

id="header.selectPax"

defaultMessage="Select the traveller for whom you'd like to enter requirement information."

/>

Using the component is straight forward, and powerful. For example, they can take values, illustrated in this example:

<FormattedMessage

id="form.name"

defaultMessage="{name}"

values={{ name }}

/>

The object you provide to values can be another FormattedMessage , meaning you can string them along like a chain to create a message with HTML tags!

<FormattedMessage

id="body.text"

defaultMessage="{bodyText}"

values={{

bodyText:

<div>

<h2>

<FormattedMessage

id="bodyText.1"

defaultMessage="Ready for a G Adventure?" />

</h2>

</div>

}}

/>

2. API

import { defineMessages } from 'react-intl' const formButtons = defineMessages({

login: {

id: 'formButtons.login',

defaultMessage: 'Login'

}

})

With the API, you define your message ahead of time in a simple Javascript object.

The API provides you with translated strings in places where a React component would not be appropriate. For example, inside of a <button> .