Internationalization (i18n)

Translation management, locale detection, pluralization, and RTL support.

Overview

i18n enables React apps to support multiple languages and regional formats.

Key Concepts

• react-i18next — Popular i18n framework for React
• Translation Files — JSON/JS files with translated strings
• Locale Detection — Browser language detection
• Pluralization — Handle singular/plural forms
• RTL Support — Right-to-left language layouts

Code Examples

import { I18nextProvider, useTranslation } from 'react-i18next';
import i18n from 'i18next';

i18n.init({
  resources: {
    en: { translation: { greeting: 'Hello, {{name}}!', items: '{{count}} item' } },
    es: { translation: { greeting: 'Hola, {{name}}!', items: '{{count}} artículo' } }
  },
  lng: 'en',
  interpolation: { escapeValue: false }
});

function Greeting() {
  const { t } = useTranslation();
  return <h1>{t('greeting', { name: 'World' })}</h1>;
}

function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('items', { count })}</p>;
}

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <select onChange={e => i18n.changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
    </select>
  );
}

Practice

Add i18n support to a React app with at least 3 languages and proper pluralization.