Building Multi-Language Support with React intl: A Step-by-Step Guide.

Building Multi-Language Support with React intl: A Step-by-Step Guide.

Internationalization is the process of designing and developing software applications that can be easily adapted to different languages and cultures. React, being a popular JavaScript library for building user interfaces, provides several options and libraries to support internationalization.

One common approach for internationalizing React apps is to use a library called react-intl. react-intl is a widely used library that provides components and APIs to format dates, numbers, and strings in a locale-specific manner.

To get started with internationalization in React using react-intl, you'll need to follow below steps:

Step 1: Set up a new React project:

Create a new React project using a tool like Create React App (CRA) or your preferred setup.

npx create-react-app my-app-react-intl

Step 2: Install the “react-intl” library:

In your project directory, install the react-intl library using npm or yarn:

npm install react-intl

Step 3: Create language translation files:

Create language-specific translation files in JSON format. Each file should contain key-value pairs, where the key represents a unique identifier for a string and the value is the translation in the corresponding language. For example, create files like en.json for English, fr.json for French, etc.

Step 4: Set up the "IntlProvider” component:

In your main app component, import the necessary dependencies from react-intl and the translation files you created. Wrap your app with the IntlProvider component and provide it with the translations and the current locale.

import React from 'react';
import { IntlProvider } from 'react-intl';
import translations from './translations'; // import your translation files

function App() {
  const locale = 'en'; // set the current locale
  const messages = translations[locale]; // get the translations for the locale

  return (
    <IntlProvider locale={locale} messages={messages}>
      {/* Your app components */}
    </IntlProvider>
  );
}

Step 5: Define language switch functionality:

Implement a way to switch between different languages in your app. This can be done through a language selection dropdown, buttons, or any other UI element. When a user selects a different language, update the locale state in your app and reload the translations for that language.

import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import translations from './translations'; // import your translation files

function App() {
  const [locale, setLocale] = useState('en'); // state for current locale

  const handleLanguageChange = (selectedLocale) => {
    setLocale(selectedLocale);
  };

  const messages = translations[locale]; // get the translations for the locale

  return (
    <IntlProvider locale={locale} messages={messages}>
      <LanguageSelector onLanguageChange={handleLanguageChange} />
      {/* Your app components */}
    </IntlProvider>
  );
}

function LanguageSelector({ onLanguageChange }) {
  const handleLanguageSelect = (e) => {
    const selectedLocale = e.target.value;
    onLanguageChange(selectedLocale);
  };

  return (
    <select onChange={handleLanguageSelect}>
      <option value="en">English</option>
      <option value="fr">French</option>
      {/* Add more language options */}
    </select>
  );
}

Step 6: Use the "FormattedMessage” component:

In your components where you need to display localized strings, use the FormattedMessage component from react-intl. It takes a id prop, which represents the key for the translation, and renders the translated string based on the current locale.

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

function Greeting() {
  return (
    <p>
      <FormattedMessage id="greeting" defaultMessage="Hello, World!" />
    </p>
  );
}

Step 7: Extract messages for translation:

To make it easier to manage and extract the messages for translation, you can use the react-intl CLI tool. It provides commands to extract messages from your React components and generate translation files automatically.

npx formatjs extract src/**/*.js --out-file src/translations/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' --extract-source-location --remove-default-message

This command will extract messages from all JavaScript files in the src directory and its subdirectories, and save the extracted messages to src/translations/en.json.

Step 8: Translate the messages:

Provide the translation files to translators, and they can fill in the translated values for each key in the files.

For example, if you have an extracted message file en.json with the following contents:

{
  "greeting": "Hello, World!",
  "buttonLabel": "Click me"
}

The translator for the French language would provide a translated file fr.json with the translated values:

{
  "greeting": "Bonjour tout le monde !",
  "buttonLabel": "Cliquez ici"
}

Step 9: Load the translated messages:

Once you have the translated files, update your app to load the appropriate translations based on the selected language. Update the messages prop in the IntlProvider with the translations for the chosen language.

import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import translations from './translations'; // import your translation files

function App() {
  const [locale, setLocale] = useState('en'); // state for current locale

  const handleLanguageChange = (selectedLocale) => {
    setLocale(selectedLocale);
  };

  const messages = translations[locale]; // get the translations for the locale

  return (
    <IntlProvider locale={locale} messages={messages}>
      <LanguageSelector onLanguageChange={handleLanguageChange} />
      <Greeting />
      {/* Your app components */}
    </IntlProvider>
  );
}

Conclusion:

This is just a basic overview of internationalizing React apps using react-intl. There are other libraries available as well, such as react-i18next and react-translate, which provide similar functionality. You can explore these libraries to find the one that best suits your project requirements.

Remember that internationalization involves more than just translating strings. It may also require handling date and time formats, number formats, pluralization, and other locale-specific behaviors. The libraries mentioned above offer features to address these requirements as well.

Additionally, it’s worth mentioning that there are also other considerations for internationalization, such as right-to-left (RTL) support for languages like Arabic or Hebrew. Implementing RTL support may involve adjusting the layout and styling of your app to accommodate RTL text direction.

I hope this information helps you get started with internationalization in React!

References:

Installation | Format.JS