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

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

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

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.

5. Add locale you want to use in your app

6. Check the setup by running npm run extract

Hurray Installation is done. Now we need to integrate LinguiJS to React App.

Create I18nLoader

Connect with the redux store and fetching locale data from the redux state.

Wrap app with I18nLoader

Now we are going to prepare our app content for translation

Wherever we need to make the text translatable, we just need to wrap it in <Trans> macro.

After wrapping text with Trans macro, we want to maintain keys for the text we want to translate in order to that we need to run extract command.

Once you will run extract command it will add all the text wrapped with <Trans> as key in all the locale files. By default file with source language in .linguirc will have wrapped text as a value too, in our case it's English.

Congratulations you are done with basic setup and integration.