React

How to install Quetzal into your React project

Prerequisites

Quetzal can be used to provide translations for React projects which use the lingui framework

Installing Quetzal

Install

npm install --save @quetzallabs/i18n-core

Setting Up

After installing the package, the following four steps are required:

1. Run Setup Script

   Run npx quetzal-setup in the directory you installed the Quetzal package

2. Set API Key

   Set the environment variable QUETZAL_API_KEY to your Quetzal API Key. Your API Key can be found on your project dashboard

3. Update quetzal.config.json

   The setup script should have created this for you. Update paths so that it points to the directories with the code you plan to localize. Update parser to lingui-parser

   Example quetzal.config.json

   {
     "paths": ["src/**/*.{js,tsx}"],
     "parser": "lingui-parser"
   }
   

4. Verify lingui.config

   Ensure that your lingui config properly defines

   Example lingui.config:

   lingui.config.js

   /** @type {import('@lingui/conf').LinguiConfig} */
   module.exports = { 
     "locales": [
         "en-US",
         "es-419"
     ],
     "sourceLocale": "en-US",
     "catalogs": [
       {
         "path": "<rootDir>/locales/{locale}/messages",
         "include": [
           "src"
         ]
       }
     ],
     "format": "po"
   };
   

And you’re done!

Setup should be complete, and you can start translating your app.

Verify Your Installation

Run npx quetzal-process-translations to test out your installation.

If your output looks similar to the one above, then Quetzal has been installed properly and your app will begin to support other languages!

If there are errors, hopefully the error is clear and can be remedied. If not, contact us and we can get your installation working.

Quetzal is designed to integrate seamlessly into your build process. So, this script should be run whenever a build is made at a minimum, but it could run as often as you like.

The setup script should have added npx quetzal-process-translations to the pre-build script in your project’s package.json, but this can be modified.