lingui-best-practices
This skill covers implementing internationalization in React and vanilla JavaScript applications using Lingui. You'll learn the standard workflow—marking messages with macros, extracting and translating catalogs, then compiling and activating locales—plus patterns for pluralization, date/number formatting, and dynamic locale switching. Best practices include choosing the right macro for your context and leveraging the ESLint plugin to catch common mistakes.
Lingui Best Practices teaches you to implement i18n in React and JavaScript using Lingui's macros, extraction, and compilation workflow.
AI-generated summary based on this skill's SKILL.md
Install
platformplatform/PlatformPlatform/lingui-best-practices · repository language: C#
git clone https://github.com/platformplatform/PlatformPlatform
cp -r PlatformPlatform/.claude/skills/lingui-best-practices ~/.claude/skills/lingui-best-practicesnpx skillfed install platformplatform/PlatformPlatform/lingui-best-practicesFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use Lingui for internationalization in React?
lingui-best-practices covers the full Lingui i18n workflow for React. Start by wrapping your app with the `<I18nProvider>` and setting the active locale. Mark user-facing strings with Lingui macros—`<Trans>` for JSX content, `msg()` for lazy or dynamic strings, and `useLingui()` hook for runtime access. Extract messages using the Lingui CLI, send catalogs to translators, then compile and load the translated catalogs back into your app. This macro-based approach keeps translations out of your bundle until needed.
What's the difference between Trans macro and useLingui?
lingui-best-practices explains that `<Trans>` is a component for marking JSX blocks with inline translations and pluralization rules, ideal for template-heavy content. `useLingui()` is a hook that gives you access to the active locale and `i18n` object for runtime operations like formatting dates or numbers, or for triggering locale switches. Use `<Trans>` when your content is static JSX; use `useLingui()` when you need programmatic control or must translate outside a component render.
How do I extract and compile messages with Lingui?
lingui-best-practices covers the message extraction workflow: run `lingui extract` to scan your codebase for Lingui macros and generate a catalog (usually `messages.po`). Send this catalog to translators who fill in translations for each locale. Then run `lingui compile` to convert the translated catalogs into optimized JavaScript modules. Load the compiled catalog for your active locale in the `<I18nProvider>`, and Lingui will use it for all macro expansions.
How can I handle pluralization and formatting in Lingui?
lingui-best-practices shows that Lingui handles pluralization inside `<Trans>` using the `plural` prop and ICU message syntax, letting you define singular and plural forms. For date and number formatting, call methods on the `i18n` object returned by `useLingui()`—for example, `i18n.date(new Date())` or `i18n.number(1234.56)`. These formatters respect the active locale and any custom number/date format rules you've configured in your Lingui setup.
Why aren't my Lingui translations working?
lingui-best-practices recommends checking: (1) Did you wrap your app with `<I18nProvider>` and pass the compiled catalog? (2) Did you run `lingui extract` and `lingui compile` after adding new macros? (3) Are your macro calls syntactically correct—`<Trans>` for JSX, `msg()` for strings? (4) Is the active locale set correctly? Enable the Lingui ESLint plugin to catch macro mistakes early. Common issues include forgetting to compile after extraction or loading the wrong locale's catalog.
How do I dynamically switch locales in a Lingui React app?
lingui-best-practices shows that locale switching happens via the `i18n` object. Call `i18n.activate(locale)` to switch the active locale, then re-render your app (usually by updating React state). Pre-load all locale catalogs at startup or lazy-load them on demand. Wrap the activation in a state update so React re-renders with the new locale. The `<I18nProvider>` will propagate the new locale to all `<Trans>` macros and `useLingui()` hooks automatically.
SKILL.md
rendered from the published skill — quoted content, verbatim
Lingui Best Practices
Lingui is a powerful internationalization (i18n) framework for JavaScript. This skill covers best practices for implementing i18n in React and vanilla JavaScript applications.
Quick Start Workflow
The standard Lingui workflow consists of these steps:
- Wrap your app in
I18nProvider - Mark messages for translation using macros (
Trans,t, etc.) - Extract messages:
lingui extract - Translate the catalogs
- Compile catalogs:
lingui compile - Load and activate locale in your app
Core Packages
Import from these packages:
```jsx // React macros (recommended) import { Trans, Plural, Select, useLingui } from "@lingui/react/macro";
// Core macros for vanilla JS import { t, msg, plural, select } from "@lingui/core/macro";
// Runtime (rarely used
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
.claude/skills/lingui-best-practices/SKILL.md
.claude/skills/lingui-best-practices/references/common-mistakes.md
.claude/skills/lingui-best-practices/references/configuration.md