Internationalization of React Apps

There are various libraries available in the market to add internationalization in the React app.

In this example, I am going to show you the integration of LinguiJS in the React app. We can use LinguiJS in core Javascript, React, React Native, Angular, Vue, and with many libraries and frameworks.

Let’s begin with the integration

1. Create react App

npx create-react-app my-app
cd my-app

2. Install @lingui/cli@lingui/macro and Babel core packages as a development dependencies and @lingui/react as a runtime dependency.

npm install --save-dev @lingui/cli @lingui/macro @babel/core babel-core@bridge
npm install --save @lingui/react

# or using Yarn
yarn add --dev @lingui/cli @lingui/macro @babel/core babel-core@bridge
yarn add @lingui/react

3. Create .linguirc in the root directory of your project

{
   "localeDir": "src/locales/",
   "srcPathDirs": ["src/"],
   "format": "po", //use 'minimal' for json format
   "sourceLocale": "en"
}

PO format is recommended by LinguiJs. Lingui supports various other formats you can refer the documentation for more information.

I personally prefer to use JSON format and if you also want to use JSON, you need to pass “format”: “minimal” instead of “po”

4. Add the below-mentioned scripts to package.json under the scripts key.

{
   "scripts": {
      "add-locale": "lingui add-locale",
      "extract": "lingui extract",
      "compile": "lingui compile"
   }
}

5..  Add locales you want to use in your app

npm run add-locale en fr zh  # Add English, French and Chinese locale

# or using Yarn
yarn add-locale en fr zh

6. Check the setup by running npm run extract

npm run extract

Hurray Installation is done.

5

Leave a Reply

Your email address will not be published. Required fields are marked *