Translating Dynamic Values, Pluralization, and Dates0%
RTL (Right-to-Left) Language Layout Support

Translating Dynamic Values, Pluralization, and Dates

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Translating Dynamic Values, Pluralization, and Dates

Basic word-for-word string translation breaks down when handling grammatically complex linguistic rules. Different human languages possess completely different rules for pluralization (e.g. English has 2 plural forms, Arabic has 6, Japanese has 0), dynamic currency formatting, and localized calendar dates. Handling these correctly requires combining i18next with the native browser Intl API.

1. Enterprise Pluralization Rules

In English, pluralization is binary (1 item vs many items). In other languages (Russian, Polish, Arabic), nouns change forms based on specific numerical remainder patterns:

JSON
// public/locales/en/common.json
{
"itemCount_one": "You have {{count}} item in your cart",
"itemCount_other": "You have {{count}} items in your cart",
"itemCount_zero": "Your shopping cart is completely empty"
}
JSON
// public/locales/ar/common.json (Arabic has 6 plural forms!)
{
"itemCount_zero": "سلتك فارغة",
"itemCount_one": "لديك عنصر واحد في سلتك",
"itemCount_two": "لديك عنصران في سلتك",
"itemCount_few": "لديك {{count}} عناصر في سلتك",
"itemCount_many": "لديك {{count}} عنصراً في سلتك",
"itemCount_other": "لديك {{count}} عنصر في سلتك"
}

When invoking t(), pass count:

TSX
// React automatically selects the correct linguistic plural form!
<p>{t("itemCount", { count: items.length })}</p>

2. Number and Currency Localization via Intl.NumberFormat

Never format currency with hardcoded dollar signs ($${amount}). Different countries format numbers differently (e.g. $1,250.50 in the US vs 1.250,50 € in Germany):

TypeScript
export function formatCurrency(amount: number, locale: string, currency: string = "USD"): string {
return new Intl.NumberFormat(locale, {
style: "currency",
currency: currency,
minimumFractionDigits: 2,
}).format(amount);
}
 
// In en-US: formatCurrency(1250.5, "en-US", "USD") ──► "$1,250.50"
// In de-DE: formatCurrency(1250.5, "de-DE", "EUR") ──► "1.250,50 €"

3. Date & Time Localization via Intl.DateTimeFormat

Formatting dates directly with string concatenation generates confusing timestamps (is 05/06/2026 May 6 or June 5?). Use Intl.DateTimeFormat:

TSX
import React from "react";
import { useTranslation } from "react-i18next";
 
export function TransactionDateBadge({ timestamp }: { timestamp: Date }) {
const { i18n } = useTranslation();
 
const formattedDate = new Intl.DateTimeFormat(i18n.language, {
dateStyle: "full",
timeStyle: "short",
}).format(timestamp);
 
return <span className="text-xs font-mono text-slate-400">{formattedDate}</span>;
}
 
// In en-US: "Tuesday, September 15, 2026 at 4:30 AM"
// In de-DE: "Dienstag, 15. September 2026 um 04:30"
// In ja-JP: "2026年9月15日火曜日 4:30"

4. Relative Time Formatting (Intl.RelativeTimeFormat)

For real-time feeds displaying "5 minutes ago" or "in 2 days":

TypeScript
export function formatRelativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, locale: string) {
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
return rtf.format(value, unit);
}
 
// formatRelativeTime(-5, "minute", "en") ──► "5 minutes ago"
// formatRelativeTime(-5, "minute", "es") ──► "hace 5 minutos"
// formatRelativeTime(1, "day", "de") ──► "morgen"
Interactive Quiz

Practice Quiz

Question 1
Why is naive pluralization (count === 1 ? "item" : "items") considered an internationalization anti-pattern?
Question 2
How does i18next determine which plural translation key to use?
Question 3
Why should native browser Intl APIs (Intl.NumberFormat, Intl.DateTimeFormat) be preferred over heavy external formatting libraries?
Question 4
How does a German locale format the number 1234567.89 compared to US English?
Question 5
What does numeric: "auto" provide in Intl.RelativeTimeFormat?
Next Lesson

RTL (Right-to-Left) Language Layout Support

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Internationalization Setup with i18next and react-i18nextRTL (Right-to-Left) Language Layout Support

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext