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.

MultiLocale helps you manage translation files of native and web appsmultilocale

Sign up for our newsletter

Recent articles