How to Localize a React App with LinguiJS

Localization is essential for building inclusive, user-friendly applications that cater to a global audience. In this article, we'll walk you through the process of localizing a React application using LinguiJS, a powerful and flexible JavaScript library for internationalization (i18n).

Prerequisites

Before diving into the tutorial, ensure that you have:

• Node.js and npm installed on your system
• A basic understanding of React and its ecosystem Let's get started!

Step 1: Setting up the React Application

First, we need to create a new React application using the Create React App (CRA) template:

npx create-react-app react-localization-lingui
cd react-localization-lingui

Step 2: Installing LinguiJS

Next, install LinguiJS and its required dependencies:<br>

npm install --save @lingui/react @lingui/core @lingui/cli

Step 3: Configuring LinguiJS

Create a configuration file for LinguiJS in the root of your project called lingui.config.js:

module.exports = {
  locales: ["en", "es", "fr"],
  catalogs: [
    {
      path: "src/locales/{locale}/messages",
      include: ["src"],
      exclude: ["**/node_modules/**"],
    },
  ],
  format: "po",
  sourceLocale: "en",
};

Here, we've specified English (en), Spanish (es), and French (fr) as the available locales. You can add or remove locales based on your needs.

Step 4: Extracting and Compiling Messages

Now, it's time to extract messages from your application and compile them into catalogs. Run the following commands in your terminal:

npx lingui extract
npx lingui compile

This will create the required message catalogs under the src/locales folder.

Step 5: Implementing Localization

First, let's import the necessary dependencies in src/index.js:

import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { en, es, fr } from "make-plural/plurals";

Next, we'll load the message catalogs and set the active locale:

import { messages as enMessages } from "./locales/en/messages";
import { messages as esMessages } from "./locales/es/messages";
import { messages as frMessages } from "./locales/fr/messages";
i18n.load({
  en: enMessages,
  es: esMessages,
  fr: frMessages,
});
i18n.activate("en");
i18n.pluralRules.register("en", en);
i18n.pluralRules.register("es", es);
i18n.pluralRules.register("fr", fr);

Now, wrap your application with the I18nProvider component:

ReactDOM.render(
  <React.StrictMode>
    <I18nProvider i18n={i18n}>
      <App />
    </I18nProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Step 6: Using Translations in Components

To translate text in your components, use the Trans component from @lingui/react. For example, in src/App.js:

import { Trans } from "@lingui/react";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          <Trans>Hello, World!</Trans>
        </p>
      </header>
    </div>
  );
}

export default App;

Step 7: Changing the Active Locale

To switch between different languages, you can create a simple language switcher component:

import React from "react";
import { useLingui } from "@lingui/react";

const LanguageSwitcher = () => {
  const { i18n } = useLingui();

  const changeLanguage = (locale) => {
    i18n.activate(locale);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("es")}>Español</button>
      <button onClick={() => changeLanguage("fr")}>Français</button>
    </div>
  );
};

export default LanguageSwitcher;

Include the LanguageSwitcher component in your App.js:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <LanguageSwitcher />
        <p>
          <Trans>Hello, World!</Trans>
        </p>
      </header>
    </div>
  );
}

Now, you can switch between the available languages by clicking the respective buttons.

Step 8: Adding New Translations

To add new translations, wrap the text you want to translate with the Trans component:

<p>
  <Trans>Welcome to our React application!</Trans>
</p>

Then, run the following commands to extract and compile messages:

npx lingui extract
npx lingui compile

Finally, edit the generated .po files in the src/locales/{locale}/messages.po directories to add your translations:

msgid "Welcome to our React application!"
msgstr "¡Bienvenido a nuestra aplicación React!"

Conclusion

In this article, we've demonstrated how to localize a React application using LinguiJS. By following these steps, you can create inclusive, user-friendly applications that cater to a diverse, global audience. With LinguiJS, internationalization becomes a straightforward and efficient process, allowing you to focus on building the core features of your application.