How to use react-intl to internationalize a React app
Internationalization (i18n), is the process whereby applications can be adapted to various languages and regions. The react-intl library provides React components and an API to format texts, dates, numbers, and strings, including handling translations.
Configuring react-intl
To begin using internationalization in our app, we’ll first need to define our locale messages. We’ll also need to set up the internationalization provider and define your locale messages. The steps to do so are as follows:
Create translation messages
The first thing that needs to be done is to define the translation messages. This can be done by creating separate files for the number of languages our application should support. In this example, we’ll create two files—one to store the app’s messages in English and one in French:
const en = {"MESSAGE_WELCOME": "Welcome at Educative","MESSAGE_LEARN": "Learn Localization in React","MESSAGE_BUILD": "Build Global Website","LINK_TEXT": "Text","LINK_NUMBER": "Number","LINK_DATE": "Date-Time"}export default en;
Integrate IntlProvider
We are provided with IntlProvider from react-intl. This component wraps our app and provides the context for translating our messages to the subcomponents in the component tree.
These subcomponents from react-intl are called formatted components. They are responsible for the proper translation and formatting of the language components at runtime. Some of these include, FormattedMessage, FormattedNumber, FormattedTime, and more. The FormattedMessage component is often used, allowing users to translate and format strings and messages. The same can be said for the FormattedTime component that is used to format time messages.
Code example: Using the react-intl library
Let’s look at an example of using IntlProvider, FormattedMessage, and FormattedDate components in our application:
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Code explanation
Line 2: We import
IntlProvider,FormattedMessage,FormattedNumber, andFormattedTimefrom thereact-intllibrary.Line 7: We initialize a state variable,
locale, with a default value of'en'.Line 9: We define an object,
messages, that maps locale identifiers—enandfr—to the respective translations.Lines 12–30: We wrap the application’s components with
IntlProvider, passing the current locale and the translations for that locale.Lines 15–16: We define two buttons to switch the locale. When clicked, they call the
setLocalefunction with eitherenorfr, updating the locale state.Lines 17–21: We use
FormattedMessageto display a formatted message for the welcome message and other texts, which will be pulled from the translations based on the current locale.Lines 22–24: We use
FormattedNumberto show a formatted number as currency (in USD).Lines 25–27: We use
FormattedTimeto show the current time with a numeric representation of hours, minutes, and seconds, including the timezone name.
