Internationalization (i18n) Cheat Sheet

Covers locale handling, the Intl API, react-i18next setup, ICU pluralization syntax, and RTL/logical-CSS techniques for internationalized web apps.

2 PagesIntermediateMar 5, 2026

Core i18n Concepts

Vocabulary you need before wiring up translations.

Locale- BCP 47 language tag identifying language + region, e.g. en-US, fr-CA
ICU MessageFormat- Standard syntax for pluralization, gender, and interpolation inside translation strings
Pluralization- Rules mapping a count to a grammatical category (zero/one/few/many/other) that vary by language
RTL (right-to-left)- Layout direction required for Arabic, Hebrew, and other scripts
Namespace- Grouping of translation keys by feature/page so translations can be lazy-loaded
Fallback locale- Language used when a key is missing in the active locale's translation file

react-i18next Setup & Usage

The most common i18n library in the React ecosystem.

javascript

// i18n.js - setupimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';i18n.use(initReactI18next).init({  resources: {    en: { translation: { greeting: 'Hello, {{name}}!' } },    fr: { translation: { greeting: 'Bonjour, {{name}} !' } },  },  lng: 'en',  fallbackLng: 'en',  interpolation: { escapeValue: false }, // React already escapes output});// Greeting.jsx - usageimport { useTranslation } from 'react-i18next';function Greeting({ name }) {  const { t, i18n } = useTranslation();  return (    <div>      <p>{t('greeting', { name })}</p>      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>    </div>  );}

Native Intl API

Built-in browser formatting, no library required.

javascript

// Number / currency formattingnew Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5);// "1.234,50 \u20ac"// Date formattingnew Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date());// "July 8, 2026"// Relative time ("2 days ago", "in 3 hours")const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });rtf.format(-1, 'day'); // "yesterday"// Pluralization category for a given locale/numberconst pr = new Intl.PluralRules('en-US');pr.select(1); // "one"pr.select(5); // "other"

ICU Plural Syntax

A single translation string that handles every plural form.

json

{  "itemCount": "{count, plural, =0 {No items} one {# item} other {# items}}"}

RTL & Locale-Aware CSS

Layout that adapts instead of a mirrored stylesheet.

dir="rtl"- HTML attribute that flips text direction and default layout for an element/document
margin-inline-start/-end- Logical CSS properties that adapt to LTR/RTL instead of fixed left/right
text-align: start/end- Direction-agnostic alternative to text-align: left/right
:dir() pseudo-class- CSS selector that matches elements based on resolved text direction
unicode-bidi- CSS property controlling how bidirectional text is rendered within an element

Pro Tip

Store translations with ICU plural/select syntax even for an English-only launch — retrofitting pluralization rules after adding a second language (especially one with more plural categories, like Arabic's six) is far more error-prone than doing it up front.

Was this cheat sheet helpful?

Form Validation Patterns Cheat Sheet

Dark Mode Implementation Cheat Sheet

Explore Topics

#InternationalizationI18n#InternationalizationI18nCheatSheet#WebDevelopment#Intermediate#CoreI18nConcepts#React#I18next#Setup#APIs#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services