Getting Started with Creating International React Apps

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.

The keys are the locale.

Messages are taken from the messages object and passed into the messages prop.

Then we used the FormattedMessage component to display the message as specified by the ID.

values has the values for the placeholder.

name is the placeholder in the message, so that’s what we passed in.

Formatting Time

We can format time using the FormattedDate component.

For instance, we can write:

import React from "react";
import { IntlProvider, FormattedDate } 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() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedDate
          value={new Date()}
          year="numeric"
          month="long"
          day="numeric"
          weekday="long"
        />
      </p>
    </IntlProvider>
  );
}

Then we get the formatted date formatted for any locale.

year sets the year format.

month sets the month format.

day sets the day format.

weekday sets the weekday format.

numeric means it’s displayed as a number.

long is displayed as the full word.

FormattedDateParts

There’s also the FormattedDateParts component to divide a date into their components.

This lets us have more customization in how to display the date.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedDateParts } 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() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedDateParts
          value={new Date()}
          year="numeric"
          month="long"
          day="2-digit"
        >
          {parts => (
            <>
              <b>{parts[0].value}</b>
              {parts[1].value}
              <em>{parts[2].value}</em>
            </>
          )}
        </FormattedDateParts>
      </p>
    </IntlProvider>
  );
}

to format our date parts with different formatting.

Then the first entry of parts is the month.

The 2nd is the comma.

And the 3rd is the day.

FormattedTime

To just show the internationalized time, we can use the FormattedTime component.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedTime } 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() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedTime value={new Date(1459832991883)} />
      </p>
    </IntlProvider>
  );
}

to show a formatted time.

FormattedTimeParts

Like with dates, we can divide the time into parts and format that.

We can use the FormattedTimeParts component to do that.

For example, we can write:

import React from "react";
import { IntlProvider, FormattedTimeParts } 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() {
  return (
    <IntlProvider locale="en" messages={messages.en}>
      <p>
        <FormattedTimeParts value={new Date()}>
          {parts => (
            <>
              <b>{parts[0].value}</b>
              {parts[1].value}
              <em>{parts[2].value}</em>
            </>
          )}
        </FormattedTimeParts>
      </p>
    </IntlProvider>
  );
}

The parts array has the hour as the first entry.

The 2nd is the colon and the 3rd is the minute.

Conclusion

We can add translations easily with the react-intl package.

Also, we can format the time the way we like.