Must-Know React Libraries - React-Intl













react-intl What is it?

react-intl is a popular library that allows you to easily add internationalization and localization (l10n) to your React applications. It enables you to present text, dates, numbers, and currencies in the user's selected language by formatting them according to different languages.

FormattedMessage What is it?

FormattedMessage is part of react-intl and is used to display text suitable for the user's language. This component retrieves and displays text from a specific translation file by identifying messages with IDs.

Short Usage Example:

• In App.js, we will determine the application's language using IntlProvider.
• We will place translation files in separate files such as en.json and tr.json.
• In a child component (Greeting.js), we will use FormattedMessage to implement our translations.

1. Creating Translation Files

First, we will create translation files for different languages. You can place these files in the src/locales directory.

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

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

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

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

2. Using IntlProvider in App.js

In the App.js file, we will provide the application's language and translations with IntlProvider. We will import the language files here.

src/App.js:

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

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

// Messages dictionary
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. Child Component Using FormattedMessage: Greeting.js

We are creating a child component named Greeting.js and within this component, we will dynamically retrieve messages using FormattedMessage.

src/Greeting.js:

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

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

export default 

4. Child Component Using intl: DocumentName.js

We are creating a child component named Greeting.js and within this component, we will dynamically retrieve messages using FormattedMessage.

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

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

  // intl.formatMessage is used to programmatically retrieve the translated message
  const docName = intl.formatMessage({ id: "doc_name" });

  return (
    <div>
      <p>{docName}</p>
    </div>
  );
}

export default DocumentName;