Setup with React project
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
Install
@lingui/cli
,@lingui/macro
,babel-plugin-macros
and Babel 1 core packages as a development dependencies and@lingui/react
as a runtime dependency.- npm
- Yarn
npm install --save-dev @lingui/cli @babel/core
npm install --save-dev @lingui/macro babel-plugin-macros
npm install --save @lingui/reactyarn add --dev @lingui/cli @babel/core
yarn add --dev @lingui/macro babel-plugin-macros
yarn add @lingui/reacttipFor those who prefer not to use Babel, Lingui offers the SWC Plugin as an alternative.
noteIt's recommended to install
@lingui/macro
package as a production dependency rather than development one to avoidimport/no-extraneous-dependencies
errors in ESLint.Add
macros
plugin to Babel config (e.g:.babelrc
):{
"plugins": [
"macros"
]
}infoIf you use any preset, check first if it contains
macros
plugin. These presets already includesmacros
plugin:react-scripts
Create
lingui.config.js
file with LinguiJS configuration in root of your project (next topackage.json
). Replacesrc
with a directory name where you have source files:lingui.config.js/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
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.Add following scripts to your
package.json
:package.json{
"scripts": {
"extract": "lingui extract",
"compile": "lingui compile",
}
}Check the installation by running:
- npm
- Yarn
npm run extract
yarn extract
There should be no error and you should see output similar following:
- npm
- Yarn
> 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)> yarn 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:
- Internationalization of React apps
- Common i18n patterns in React
@lingui/react
reference documentation- ICU Message Format
- CLI reference
- Configuration reference
- For those who prefer not to use Babel, Lingui offers the SWC Plugin as an alternative.↩