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.