react-i18n_skill

Overview

This skill provides a ready-to-use react-i18next integration tailored for React 19 and TypeScript. It equips projects with the useTranslation hook, the TypeScript Selector API, namespaces, pluralization, lazy loading, and Suspense-friendly patterns for concurrent rendering. Use it to implement robust, type-safe translations in React apps (not Next.js).

How this skill works

The skill sets up a modular i18n core with services, hooks, and config files that initialize i18next, register backends and detectors, and expose typed selectors. It uses react-i18next hooks (useTranslation) and the i18next Selector API to provide autocomplete and compile-time safety. Namespaces are loaded lazily per feature or route, and the app is wrapped with Suspense for smooth loading states.

When to use it

• Implement translations in a React 19 application (non-Next.js).
• Need type-safe translation keys and autocompletion with TypeScript.
• Want per-feature code-splitting of translation files (namespaces).
• Require lazy loading of locales and Suspense integration for concurrent rendering.
• Support pluralization, interpolation, and RTL languages.

Best practices

• Follow SOLID: small files (<100 lines), interfaces in modules/*/src/interfaces/, and no business logic in components.
• Wrap the app in Suspense and provide a concise loading UI for namespace fetches.
• Organize translations by namespace per feature to enable lazy loading and simpler maintenance.
• Use the TypeScript Selector API to enforce type safety and avoid runtime key errors.
• Configure language detection order and always set fallbackLng to prevent broken UI.

Example use cases

• Feature module with its own namespace and lazy-loaded translations for route-based code splitting.
• Typed translation calls in forms and validation messages using the Selector API for autocompletion.
• Language switcher component using i18n.changeLanguage() and persisted detection (cookie/localStorage).
• Pluralized messages and ICU formatting for counts, currency, and dates in checkout flows.
• Unit tests that mock i18n to assert translated UI output without loading backends.