react-i18next for React 19 - useTranslation hook, TypeScript Selector API, namespaces, pluralization, lazy loading, Suspense integration. Use when implementing translations in React apps (not Next.js).
From fuse-reactnpx claudepluginhub fusengine/agents --plugin fuse-reactThis skill uses the workspace's default tool permissions.
references/fallback-strategies.mdreferences/i18next-basics.mdreferences/interpolation.mdreferences/language-detection.mdreferences/lazy-loading.mdreferences/namespaces.mdreferences/pluralization.mdreferences/react-19-integration.mdreferences/rtl-support.mdreferences/templates/basic-setup.mdreferences/templates/date-number-formatter.mdreferences/templates/form-validation-i18n.mdreferences/templates/language-switcher.mdreferences/templates/lazy-loading-routes.mdreferences/templates/plural-interpolation.mdreferences/templates/testing-i18n.mdreferences/templates/trans-component-examples.mdreferences/templates/typed-translations.mdreferences/testing.mdreferences/trans-component.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
ALWAYS apply SOLID principles from solid-react skill.
→ See ../solid-react/SKILL.md for complete rules
Key Rules:
modules/[feature]/src/interfaces/| Hook | Purpose | Guide |
|---|---|---|
useTranslation() | Access translations and i18n instance | references/i18next-basics.md |
useTranslation(ns) | Load specific namespace | references/namespaces.md |
useTranslation([ns]) | Load multiple namespaces | references/namespaces.md |
→ See references/i18next-basics.md for detailed usage
| Package | Purpose | Size |
|---|---|---|
i18next | Core library | ~40KB |
react-i18next | React bindings | ~12KB |
i18next-http-backend | Lazy loading | ~5KB |
i18next-browser-languagedetector | Auto-detection | ~8KB |
Type-safe translations with autocompletion.
→ See references/typescript-types.md
Organize translations by feature for code splitting.
→ See references/namespaces.md
Count-based rules with ICU MessageFormat support.
→ See references/pluralization.md
Variables, dates, numbers, and currency formatting.
→ See references/interpolation.md
Load translations on-demand per route.
→ See references/lazy-loading.md
Auto-detect from browser, URL, cookie, localStorage.
→ See references/language-detection.md
Suspense, useTransition, Concurrent Rendering.
→ See references/react-19-integration.md
JSX elements inside translations.
→ See references/trans-component.md
Mock i18n for unit tests.
→ See references/testing.md
Right-to-left languages (Arabic, Hebrew).
→ See references/rtl-support.md
Handle missing keys gracefully.
→ See references/fallback-strategies.md
| Template | Use Case |
|---|---|
templates/basic-setup.md | Configuration with React 19 |
templates/language-switcher.md | Dropdown component |
templates/typed-translations.md | TypeScript Selector API |
templates/form-validation-i18n.md | Translated form errors |
templates/lazy-loading-routes.md | Per-route loading |
templates/date-number-formatter.md | Intl formatting |
templates/plural-interpolation.md | Count-based messages |
templates/trans-component-examples.md | JSX in translations |
templates/testing-i18n.md | Unit test setup |
src/
├── modules/cores/i18n/
│ ├── src/
│ │ ├── interfaces/
│ │ │ └── i18n.interface.ts
│ │ ├── services/
│ │ │ └── i18n.service.ts
│ │ ├── hooks/
│ │ │ └── useLanguage.ts
│ │ └── config/
│ │ └── i18n.config.ts
│ ├── components/
│ │ └── LanguageSwitcher.tsx
│ └── locales/
│ ├── en/
│ │ └── translation.json
│ └── fr/
│ └── translation.json
└── main.tsx
<Suspense> for loading statesfallbackLngt('key'){{var}}i18n.changeLanguage()