i18n-react-rules

What problem does it solve?

Provide a clear, production-ready pattern to add internationalization to Vite single-page React applications so translations, pluralization, locale detection, formatting, and RTL behavior work consistently and are maintainable across the codebase.

Core Features & Use Cases

• Standardized Setup: Install and configure react-i18next with i18next-http-backend and i18next-browser-languagedetector to load namespaces from public locales and detect user language.
• Pluralization and ICU: Support i18next native plural suffixes and optional i18next-icu for complex MessageFormat cases like gender selects and advanced plurals.
• Locale-aware Formatting & RTL: Use the browser Intl API for dates, numbers, and currency and apply logical CSS properties or document dir toggling for reliable RTL support.
• Use Case: Localize an e-commerce Vite SPA with namespace-separated translation files, proper plural handling for product counts, localized price/date formatting, and automatic language detection with cookie fallback.

Quick Start

Install and configure react-i18next with i18next-http-backend and i18next-browser-languagedetector, set a sensible fallback language and supported languages, place JSON namespace files under public/locales/<lng>, and import the i18n initializer before rendering the app.