To make an app with internationalization with React, we can use the react-intl library.

Getting Started

We can use it by first installing it by running:

npm install --save react-intl

Then we can create our messages by adding:

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { IntlProvider } from "react-intl";

import App from "./App";

const messages = {
  en: {
    GREETING: "Hello {name}"
  },
  fr: {
    GREETING: "Bonjour {name}"
  }
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messages["fr"]}>
      <App />
    </IntlProvider>
  </React.StrictMode>,
  rootElement
);

App.js:

import React from "react";
import { FormattedMessage } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedMessage id="GREETING" values={{ name: "james" }} />
    </div>
  );
}

We have the `messages object for the messages we want to create.

{name} is a placeholder for interpolating text we want to include dynamically.

Then we import the IntlProvider component and wrap it around our app so that we can use react-intl throughout our app.

We also set the locale and the messages object to pass in the messages to our app so we can use it.

Then in App, we use the FormattedMessage component to display our internationalized text.

id is the key of the message in the messages object in index.js.

values has the object that we have in the curly braces.

We have the name property in the object that we pass into the values prop.

This means that {name} is replaced by the value of name in that object.

Dates

We can use the FormattedDate component to format dates. To use it, we write:

import React from "react";
import { FormattedDate } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedDate
        value={new Date()}
        year="numeric"
        month="long"
        day="numeric"
        weekday="long"
      />
    </div>
  );
}

We keep index.js the same as before, then we’ll see a French date.

The year, month, day, and weekday props can take values to adjust the format.

Internationalized Time

The FormattedTime component is available to format time.

We can write:

import React from "react";
import { FormattedTime } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedTime value={new Date()} hour="numeric" minute="numeric" />
    </div>
  );
}

to format our dates. We chose to display both the hour and minute as numbers.

Format Numbers.

react-intl can also format numbers. We can use the FormattedNumber component to format numbers.

For instance, we write:

import React from "react";
import { FormattedNumber } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedNumber value={1000} />
    </div>
  );
}

Plurals

This package can also format plural.

For example, we can write:

import React from "react";
import { FormattedPlural } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedPlural value={10} one="message" other="messages" />
    </div>
  );
}

one has the singular word, and other has the plural word.

It’s displayed according to the value of value. If value is 1, the singular word is displayed.

Otherwise, plural is displayed.

List

Lists can also be formatted with the FormattedList component.

For instance, we can write:

import React from "react";
import { FormattedList } from "react-intl";

export default function App() {
  return (
    <div className="App">
      <FormattedList type="conjunction" value={["moi", "moi", "toi"]} />{" "}
    </div>
  );
}

We just pass in the array for value. If we keep index.js the same as the first example, then we get French.

So we have ‘moi, moi et toi’ on the screen.

Conclusion

We can use react-intl to internationalize our React apps. It has components to format any string we can think of.

The react-intl examples above will help us do anything with ease.