Skip to main content

Setup with React project

info

If you use Create React App, even ejected, follow LinguiJS and Create React App setup guide.

This setup guide is for any project which uses React.

Install​

  1. Install @lingui/cli, @lingui/macro, babel-plugin-macros and Babel core packages as a development dependencies and @lingui/react as a runtime dependency.

    npm install --save-dev @lingui/cli @babel/core
    npm install --save-dev @lingui/macro babel-plugin-macros  # required for macros
    npm install --save @lingui/react

    In case you get errors with import/no-extraneous-dependencies eslint rule feel free to add the dependencies as non-dev

    npm install --save-dev @lingui/cli @babel/core
    npm install --save-dev babel-plugin-macros  # required for macros
    npm install --save @lingui/macro @lingui/react

  2. Add macros plugin to Babel config (e.g: .babelrc):

    {
      "plugins": [
        "macros"
      ]
    }
    info

    If you use any preset, check first if it contains macros plugin. These presets already includes macros plugin: react-scripts

  3. Create .linguirc file with LinguiJS configuration in root of your project (next to package.json). Replace src with a directory name where you have source files:

    .linguirc
    {
       "locales": ["en", "cs", "fr"],
       "catalogs": [{
          "path": "src/locales/{locale}/messages",
          "include": ["src"]
       }],
       "format": "po"
    }

    PO format is recommended for message catalogs. See format documentation for other available formats.

  4. Add following scripts to your package.json:

    package.json
    {
       "scripts": {
          "extract": "lingui extract",
          "compile": "lingui compile",
       }
    }

  5. Check the installation by running:

    npm run extract

    There should be no error and you should see output similar following:

    > npm run extract

    Catalog statistics:
    ┌──────────┬─────────────┬─────────┐
    │ Language │ Total count │ Missing │
    ├──────────┼─────────────┼─────────┤
    │ cs       │     0       │   0     │
    │ en       │     0       │   0     │
    │ fr       │     0       │   0     │
    └──────────┴─────────────┴─────────┘

    (use "lingui extract" to update catalogs with new messages)
    (use "lingui compile" to compile catalogs for production)

Congratulations! You've successfully set up project with LinguiJS. Now it's good time to follow React tutorial or read about ICU Message Format which is used in messages.

Further reading​

Checkout these reference guides for full documentation: