i18n with react-i18next

A minimal React i18n setup using react-i18next, providing English and Spanish translations.

Install

npm install i18next react-i18next i18next-browser-languagedetector

Translation files

src/i18n/en/common.json

{
  "greeting": "Hello, {{name}}!",
  "cart": {
    "itemCount": "{{count, plural, one {# item} other {# items}}} in your cart"
  }
}

src/i18n/es/common.json

{
  "greeting": "¡Hola, {{name}}!",
  "cart": {
    "itemCount": "{{count, plural, one {# artículo} other {# artículos}}} en tu carrito"
  }
}

Configuration

src/i18n/index.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import enCommon from './en/common.json';
import esCommon from './es/common.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'es'],
    defaultNS: 'common',
    resources: {
      en: { common: enCommon },
      es: { common: esCommon },
    },
    interpolation: { escapeValue: false },
  });

export default i18n;

Component usage

src/components/Cart.tsx

import { useTranslation } from 'react-i18next';

type CartProps = { userName: string; itemCount: number };

export function Cart({ userName, itemCount }: CartProps) {
  const { t, i18n } = useTranslation();

  return (
    <section>
      <h1>{t('greeting', { name: userName })}</h1>
      <p>{t('cart.itemCount', { count: itemCount })}</p>

      <label>
        Language
        <select
          value={i18n.language}
          onChange={(e) => i18n.changeLanguage(e.target.value)}
        >
          <option value="en">English</option>
          <option value="es">Español</option>
        </select>
      </label>
    </section>
  );
}

Notes

• Keys are identical across locales — only values change.
• ICU plural syntax handles one / other automatically.
• See the shared i18n guidelines for cross-framework conventions.