DEV Community

loading...
Localizely

React internationalization with react-intl

zluledzija profile image Zoran Luledzija Originally published at localizely.com ・3 min read

Struggling with React internationalization? Not sure which library to pick? Need to support a variety of formatting options? Many questions arise when we need to choose the best solution for our project. In this post, you will find how to set up internationalization in your React app with one of the most popular libraries out there, the react-intl.

The react-intl is a part of Format.JS, a set of JavaScript libraries for internationalization and formatting. It is a well-documented and maintained library. It works well in all major browsers. For older browsers, there are polyfills. Plenty of formatting options and support for the ICU Message syntax makes it very handy.

Let's start.

Create new React project

First things first, let’s create a new React app with Create React App.

npx create-react-app react-intl-example
Enter fullscreen mode Exit fullscreen mode

Add React Intl dependency

To use the react-intl library in the project, you need to add it as a dependency.

cd react-intl-example
npm i --save react-intl
Enter fullscreen mode Exit fullscreen mode

Create localization files

The next step is to create the localization files for the required locales. It is good practice to keep all localization files in one place (e.g. src/lang). In this example, we will add three JSON files under the lang directory: ar.json, en.json, and es-MX.json. These files are going to hold translations for the Arabic, English, and Spanish (Mexico).

Below, you can see how the project structure should look after adding mentioned files.

react-intl-example
|-- lang
|   |-- ar.json
|   |-- en.json
|   |-- es-MX.json
|-- src
|   |-- App.js
|   |-- App.test.js
|   |-- index.js
|   |-- ...
|-- ...
|-- package.json
|-- package-lock.json
Enter fullscreen mode Exit fullscreen mode

As we are going to use localization messages later, let’s populate added files with some content.

ar.json:

{
  "message.simple": "رسالة بسيطة."
}
Enter fullscreen mode Exit fullscreen mode

en.json:

{
  "message.simple": "A simple message."
}
Enter fullscreen mode Exit fullscreen mode

es-MX.json:

{
  "message.simple": "Un mensaje sencillo."
}
Enter fullscreen mode Exit fullscreen mode

Wrap your app with the IntlProvider

Finally, wrap the top-level app component with the IntlProvider from the react-intl library and pass the appropriate messages (check the LocalizationWrapper component).

App.js:

import React, { useState, useEffect } from "react";
import { useIntl, IntlProvider, FormattedMessage } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function getDirection(locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
      return "ltr";
    case "es-MX":
      return "ltr";
    default:
      return "ltr";
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);
  useEffect(() => loadMessages(locale).then(setMessages), [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App locale={locale} direction={getDirection(locale)} onLocaleChange={(locale) => setLocale(locale)} />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  const intl = useIntl();

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction}>
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Congratulations, you have successfully set up internationalization in your React app!

More details and examples you can find in the original post.

All code samples are available on the GitHub repo.

We hope you found it helpful.

Discussion (0)

pic
Editor guide