How to implement internationalization (i18n) in React?

Question

Accepted Answer

**Internationalization (i18n)** — adapting the application for different languages and regions. **Why it matters:** If your application targets users in multiple countries, i18n is essential. It handles not just translations but also date formats, number formatting, pluralization rules, right-to-left (RTL) layouts, and currency display. Without proper i18n, your app may display awkward formatting like "1 items" or dates in the wrong order. **react-intl (FormatJS)** — the most popular library: ```jsx import { IntlProvider, FormattedMessage, FormattedNumber } from "react-intl"; // 1. Messages by language const messages = { en: { greeting: "Hello, {name}!", items: "{count, plural, one {# item} other {# items}}", price: "{value, number, ::currency/USD}", }, ru: { greeting: "Привет, {name}!", items: "{count, plural, one {# товар} few {# товара} many {# товаров} other {# товаров}}", price: "{value, number, ::currency/USD}", }, }; // 2. Component with localization function Welcome({ name, itemCount, price }) { return (

); } // 3. Provider function App() { const [locale, setLocale] = useState("en"); return ( ); } ``` **Key concepts to understand:** - **ICU Message Format** — the standard syntax for plurals, gender, and select in translations. - **Locale detection** — can be based on `navigator.language`, user settings, or URL parameter. - **Lazy loading translations** — load only the messages for the current locale to reduce bundle size. - **RTL support** — set `dir="rtl"` on the `` element for languages like Arabic or Hebrew. **How locale switching works:** 1. User clicks a language toggle button. 2. The locale state updates (e.g., "en" → "es"). 3. IntlProvider re-renders with the new messages dictionary. 4. All `` components automatically re-render with the new text. 5. ``, `` adapt to the new locale formatting rules. **Alternatives:** - **react-i18next** — more flexible (load translations from files, namespaces, interpolation). - **LinguiJS** — compact, Babel integration, supports React and plain JS. - **next-intl** — for Next.js App Router with server component support.

React: How to implement internationalization (i18n) in React?