Best React Libraries: React-Intl

What is react-intl?

react-intl is a powerful library that simplifies the process of adding internationalization (i18n) and localization (l10n) to your React applications. With react-intl, you can seamlessly display text, dates, numbers, and currencies tailored to the user’s language and formatting preferences.

What is FormattedMessage?

FormattedMessage is a key feature of react-intl, designed to make displaying translated messages in your app effortless. It retrieves the appropriate text from a translation file using unique message IDs and dynamically adjusts the content based on the user’s selected language.

Quick Start Guide to react-intl

Here’s how to integrate react-intl into your React application step by step:

1. Creating Translation Files

First, define translation files for your supported languages. Save these files in the src/locales directory.

English Translations (src/locales/en.json):

{
  "greeting": "Hello, {name}!",
  "welcome": "Welcome to our application!"
}

Turkish Translations (src/locales/tr.json):

{
  "greeting": "Merhaba, {name}!",
  "welcome": "Uygulamamıza hoş geldiniz!"
}

2. Setting Up IntlProvider in App.js

Next, wrap your app in the IntlProvider component to manage translations and the active language.

src/App.js:

import React, { useState } from "react";
import { IntlProvider } from "react-intl";
import Greeting from "./Greeting";

// Translation files
import enMessages from "./locales/en.json";
import trMessages from "./locales/tr.json";

// Language-to-messages mapping
const messages = {
  en: enMessages,
  tr: trMessages,
};

function App() {
  const [locale, setLocale] = useState("en"); // Default language: English

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div className="App">
        {/* Language switch buttons */}
        <button onClick={() => setLocale("en")}>English</button>
        <button onClick={() => setLocale("tr")}>Türkçe</button>

        {/* Greeting component */}
        <Greeting name="Ali" />
      </div>
    </IntlProvider>
  );
}

export default App;

3. Using FormattedMessage in a Child Component

Create a child component (e.g., Greeting.js) to render dynamic and localized content.

src/Greeting.js:

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

function Greeting({ name }) {
  return (
    <div>
      <FormattedMessage id="greeting" values={{ name }} />
      <FormattedMessage id="welcome" />
    </div>
  );
}

export default Greeting;

4. Programmatically Accessing Translations with useIntl

For programmatic access to translations, use the useIntl hook, which provides the intl.formatMessage function to retrieve messages dynamically.

src/DocumentName.js:

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

function DocumentName() {
  const intl = useIntl();

  // Retrieve the translated message by ID
  const docName = intl.formatMessage({ id: "doc_name" });

  return <p>{docName}</p>;
}

export default DocumentName;

Why Choose react-intl?

With its intuitive API and robust features, react-intl empowers developers to deliver personalized and localized user experiences, making your applications accessible to a global audience.

Start integrating react-intl today and take your React projects to the next level!

Have you tried react-intl in your projects? Share your experience in the comments below!