How to Use React Intl to Internationalize Your React Applications

React Intl is a popular library that provides a set of components and utilities to internationalize React applications. Internationalization, also known as i18n, is the process of adapting an application to different languages and cultures.

You can easily support multiple languages and locales in your React application with ReactIntl.

Installing React Intl

To use the React Intl library, you must first install it. You can do this withmore than one package manager: npm, yarn, or pnpm.

To install it with npm, run this command in your terminal:

To install it using yarn, run this command:

How to Use the React Intl Library

Once you’ve installed the React Intl library, you can use its components and features in your application. React Intl has similar functions to theJavaScript Intl API.

Some valuable components offered by the React Intl library include theFormattedMessageandIntlProvidercomponents.

The FormattedMessage component displays translated strings in your application, while the IntlProvider component provides the translations and formatting information to your application.

You must create a translation file before you can start using the FormattedMessage and IntlProvider components to translate your application. A translation file contains all the translations for your application. You can create separate files for each language and locale or use a single file to contain all the translations.

For example:

This example translation file contains two translation objects:messagesInFrenchandmessagesInItalian. You can replace the placeholder{name}in thegreetingstring at runtime with a dynamic value.

To use the translations in your application, you must wrap your application’s root component with theIntlProvidercomponent. The IntlProvider component takes threeReact props:locale,defaultLocale, andmessages.

The locale prop accepts a string that specifies the user’s locale, while the defaultLocale specifies a fallback if the user’s preferred locale is unavailable. Lastly, the messages prop accepts a translation object.

Here’s an example showing how you can use IntlProvider:

This example passes thefrlocale, themessagesInFrenchtranslation, and a defaultenlocale to theIntlProvidercomponent.

You can pass more than one locale or translation object, and theIntlProviderwill automatically detect the user’s browser language and use the appropriate translations.

To display translated strings in your application, use theFormattedMessagecomponent. TheFormattedMessagecomponent takes anidprop corresponding to a message ID in the messages object.

The component also takes adefaultMessageandvaluesprop. ThedefaultMessageprop specifies a fallback message if a translation is unavailable for the current locale, while thevaluesprop provides dynamic values for the placeholders in your translated messages.

In this code block, theidprop of theFormattedMessagecomponent uses thegreetingkey from themessagesInFrenchobject, and thevaluesprop replaces the{name}placeholder with the value “John”.

Formatting Numbers With the FormattedNumber Component

React Intl also provides theFormattedNumbercomponent which you may use to format numbers based on the current locale. The component accepts various props to customize the formatting, such as style, currency, and minimum and maximum fraction digits.

Here are some examples:

This example uses theFormattedNumbercomponent which accepts avalueprop specifying the number you want to format.

Using thestyleprop, you can customize the appearance of the formatted number. You can set thestyleprop todecimal,percent, orcurrency.

When you set thestyleprop to currency, theFormattedNumbercomponent formats the number as a currency value using the code specified in thecurrencyprop:

TheFormattedNumbercomponent formats the number in the code block above using thecurrencystyle and theUSDcurrency code.

You can also format numbers with a specific number of decimal places using theminimumFractionDigitsandmaximumFractionDigitsprops.

TheminimumFractionDigitsprop specifies the minimum number of fraction digits to display. In contrast, themaximumFractionDigitsprop specifies the maximum number of fraction digits.

If a number has fewer fraction digits than the specifiedminimumFractionDigits, React Intl will pad it with zeros. If the number has more fraction digits than the specifiedmaximumFractionDigits, the library will round the number up.

Here’s an example showing how you can use these props:

Formatting Dates With the FormattedDate Component

you may format dates in a way that is consistent and easy to read using React Intl. TheFormattedDatecomponent provides a simple and effective way to format dates. It works similarly todate-time libraries that format dates, such as Moment.js.

The FormattedDate component takes many props, such asvalue,day,month, andyear. The value prop accepts the date you want to format, and the other props configure its formatting.

In this example, thevalueprop uses the current date. Also, using theday,month,andyearprops, you specify that you want the year, month, and day to display in a long format.

Alongside day, month, and year, other props also format the date’s appearance. Here are the props and the values they accept:

You can also use theFormattedDatecomponent to format and display time:

Internationalize Your React Applications for a Wider Audience

You learned how to install and set up the React-Intl library in your React application. React-intl makes it easy to format your React application’s numbers, dates, and currencies. You can format data based on the user’s locale using the FormattedMessage, FormattedNumber, and FormattedDate components.

React developers often make mistakes that can lead to serious consequences. For example, failing to update the state properly. It’s important to be aware of these common mistakes and correct them early to avoid costly problems.