React Intl

React Intl

 

React Intl  is Internationalization. It is part of Format JS and provides bindings to React via its components and API.

Features

  • Display numbers with separators.
  • Display dates and times correctly.
  • Display dates relative to “now”.
  • Pluralize labels in strings.
  • Support for 150+ languages.
  • Runs in the browser and Node.js.
  • Built on standards.

The React Intl library provides the mechanism to properly translate file text into other languages.

As globalization increases, writing React applications for a wide-ranging audience in different regions and locales means making it accessible across languages Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

 

 

Internationalization and localization

 

 

React Intl allows us to set up Internationalization in a React app. Internationalization is the process of designing a product — in this case, a React app — to be used within different locales. It is often abbreviated as Intl or i18n.

It’s basically the focuses on translating an internationalized app from its original language to a specific language.

But hey, translation is more than just transforming the text or message to a target language. Cultural differences must also be considered, like how numbers and dates are written or how units and currencies are placed for different locales.

But, using the React Intl library, we can easily achieve it

 

React Intl library

To use this library, we must install it by stopping the development server and running the following command from the terminal:

npm install react-intl

This library gives us all the APIs and components needed to implement internationalization into our app.

React IntlProvider component

IntlProvider are provided or made available to the subcomponents in the tree.

These subcomponents from React Intl are called formatted components. They are responsible for the proper translation and formatting at runtime. These components are:

  • FormattedNumber
  • FormattedMessage
  • FormattedDate
  • FormattedPlural

 

For internationalization projects using the React Intl library, the FormattedMessage component is often used, allowing users to translate and format simple to complex strings and messages

React Intl API

We can format our data is though the React Intl API. Though using the component method is preferred in React because it works seamlessly with other React components, there are cases where the API method is needed, such as when the placeholder, title, or aria-label of an element must be translated.

Anytime we use formatted components to render a React element, they use the React Intl API behind the scenes.