Internationalization (i18n) Patterns

Build multilingual React applications: react-i18next patterns, date/time formatting, RTL support, locale management, translation strategies, pluralization, and currency formatting.

🌍 1. react-i18next Patterns

Ready to make your app speak every language? 🗣️ Let's set up react-i18next and watch your translations come alive — it's easier than ordering coffee in a foreign country! ☕🌎

🔵 Impact: MEDIUM — Going multilingual opens your app to millions of new users worldwide! 🚀

📋 In this section: i18next Setup • Translation Resources • useTranslation Hook • Language Switching

tsx

// ✅ Setup
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: { welcome: 'Welcome' } },
    es: { translation: { welcome: 'Bienvenido' } }
  },
  lng: 'en',
  fallbackLng: 'en'
});

// ✅ Usage
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}