How to Localize a React App with LinguiJS

How to Localize a React App with LinguiJS

Learn to localize a React app using LinguiJS, set up language files, integrate translations, and create a multilingual user experience.

Posted by Joe Dodds on April 26, 2023

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).


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!"


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.

Sign up for our newsletter

Recent articles