Internationalization in React with (React-intl )

What is internationalization?

internationalization is hard to pronounce so we sometimes pronounce it this way ( i18n ).

internationalization is basically the development of an application in order to easily enable localization for users belonging to different regions with different cultures.

With the rise in globalization, we cannot say that the user will only be coming from a specific region.

Now the user base almost comes from every country in the world.
Instagram, Twitter, Facebook, google. whatever you name it.

These all big giants have facilitated the culture of i18n in their application.

Let's take an example to understand its importance.

Because of some urgency due to work you need to visit Russia

And for that, you need to apply for a work visa on the Russian website.

Being Spanish you won't be able to understand Russian, so the Russian official website internationalizes the website just for users like you.

All the content can be localized to the Spanish language and it will be easy for you to understand how to process your visa file request.

Russian to Spanish ( “Submit ” ) button

Now, what is localization ?

Also known by (L10N).

Localization is an adaption of application content according to the region, where the app is being used.

The translation is not the complete solution

Because sometimes we need a stable parser to format the number, and currency for a particular region.

The line direction is also needed to be decided.

So there are many factors why translation is not always a better solution

To enable Internationalization in React with react-intl by formatjs

With React-intl we can easily add Internationalization (i18n) to our React app

install react -intl to your react app

npm install react-intl

This is the whole code of our small application , we will break down concepts one by one.

Our Internalized (i18n) APP

import { useState } from "react";
import { IntlProvider, FormattedMessage, FormattedNumber } from "react-intl";

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

function App() {
  const [currentLocale, setLocale] = useState("en");
  const getMessageForLocale = (localeType) => {
    switch (localeType) {
      case "en":
        return messageInEnglish;
      case "fr":
        return messagesInFrench;
      case "hi":
        return messageInHindi;
    }
  };

  return (
    <IntlProvider
      messages={getMessageForLocale(currentLocale)}
      locale={currentLocale}
      defaultLocale="en"
    >
      <p>
        <FormattedMessage id="myMessage" values={{ ts: Date.now() }} />
        <br />
      </p>
      <button onClick={() => setLocale("fr")}>French</button> <br/>
      <button onClick={() => setLocale("hi")}>Hindi</button>
    </IntlProvider>
  );
}

export default App;

Our application is localized in three different locale French , Hindi , English.

Breakdown of App.js

import { IntlProvider, FormattedMessage } from "react-intl";

IntlProvider

This actually provides the context of (i18n) data (like messages for the different regions) to children's components.

This configures the current locale and translation message at the root of our application so that it can be accessed anywhere in our app.

What is a locale?

locale is a combination of language + region

• en-US for English as spoken in the United States
• en-GB for English as spoken in the United Kingdom
• es-AR for Spanish as spoken in Argentina

Here are the translation messages are:

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

 <IntlProvider
      messages={getMessageForLocale(currentLocale)}
      locale={currentLocale}
      defaultLocale="en"
    >

message : getMessageForLocale( ) gets the message for current locale

locale: currentLocale has the value of the current locale of our app

defaultLocale: ‘en’ English

When we click these buttons the current locale change respectively

 <button onClick={() => setLocale("fr")}>French</button> <br/>
  <button onClick={() => setLocale("hi")}>Hindi</button>

If ‘french’ button is clicked the current locale will be set to “fr”
if ‘hindi’ button is clicked the current locale will be set to “hi”

And hence also the messages will also be changed in accord to the region.

 const [currentLocale, setLocale] = useState("en");
  const getMessageForLocale = (localeType) => {
    switch (localeType) {
      case "en":
        return messageInEnglish;
      case "fr":
        return messagesInFrench;
      case "hi":
        return messageInHindi;
    }
  };

FormatMessage

This component formats the message with the id value of the string based on the locale.

Here in our example

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

// id is MyMessage 
// we use format message this way

 <FormattedMessage id="myMessage" values={{ ts: Date.now() }} />

FormatMessge will render that particular id message

It also enables embedding the data values according to the format of the current locale.

For ‘en’ locale

Today is {ts ,date , ::yyyyMMdd}  // english format

// ts value will be of Date.now()

// which will render

// Today is 08/07/2022

// 08/07/2022  mm/dd/yy the english format

For ‘hi’ locale

आज की तारीख {ts, date, ::yyyyMMdd} // hindi format

// ts value will be of Date.now()

// which will render

// आज की तारीख 07/08/2022

//   07/08/2022 dd/mm/yy the hindi localized format

You can observe how the date format change according to region.

That's what is basically called localization (L10N).

Formatting the content of our based on location and region of our user.

There are also some other components for formatting different types of data like Numbers, Relative time .

You can refer to the API docs.

https://formatjs.io/docs/react-intl/api/#formattime

So this was just the basic example of how we can enable our react-app to operate in a different regions.

I hope this might helped you!

Thank you for the read 🌻.

Until then Good Bye 👋