Getting Started with Creating International React Apps

Photo by maggie bell on Unsplash

Many apps have to be made usable by different users from various parts of the world.

To make this easier, we can use the react-intl to do the internationalization for us.

In this article, we’ll look at how to get started with the react-intl library.

Getting Started

To get started, we install the package by running:

npm install react-intl --save

Then we can use the IntlProvider to our app to let us use it:

import React from "react";
import { IntlProvider, FormattedMessage } from "react-intl";
const messages = {
  en: {
    greeting: "Hello {name}! How's it going?"
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo te va?"
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?"
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?"
  }
};
export default function App() {
  const [name] = React.useState("james");
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedMessage id="greeting" values={{ name }} />
      </p>
    </IntlProvider>
  );
}

We have the translated messages in the messages object.