Plurals — Handling Pluralization Across Languages

// i18n/plurals-intl.js — Using Intl.PluralRules
class PluralHandler {
    constructor(locale) {
        this.locale = locale;
        this.pluralRules = new Intl.PluralRules(locale);
        this.ordinalRules = new Intl.PluralRules(locale, { type: 'ordinal' });
    }

    // Get cardinal plural category (for counts)
    getCardinal(count) {
        return this.pluralRules.select(count);
    }

    // Get ordinal plural category (for 1st, 2nd, 3rd)
    getOrdinal(count) {
        return this.ordinalRules.select(count);
    }

    // Get all supported categories for this locale
    static getCategories(locale) {
        const rules = new Intl.PluralRules(locale);
        const categories = ['zero', 'one', 'two', 'few', 'many', 'other'];
        return categories.filter(cat => {
            // Find a number that produces this category
            for (let i = 0; i <= 100; i++) {
                if (rules.select(i) === cat) return true;
            }
            return false;
        });
    }

    // Resolve a count-based template
    resolve(templates, count) {
        const category = this.getCardinal(count);
        const template = templates[category] || templates.other;
        if (typeof template === 'function') {
            return template(count);
        }
        return template.replace('{count}', count);
    }

    // Demonstrate plural forms
    demo() {
        const categories = PluralHandler.getCategories(this.locale);
        console.log(`Locale ${this.locale} has categories: ${categories.join(', ')}`);

        const examples = [0, 1, 2, 3, 5, 10, 21, 100];
        examples.forEach(count => {
            console.log(`  ${count} → ${this.getCardinal(count)}`);
        });
    }
}

// Demo English
console.log('=== English Plurals ===');
const en = new PluralHandler('en');
en.demo();

// Demo Russian
console.log('\\n=== Russian Plurals ===');
const ru = new PluralHandler('ru');
ru.demo();

// Demo Arabic
console.log('\\n=== Arabic Plurals ===');
const ar = new PluralHandler('ar');
ar.demo();

// Demo Japanese (no plurals)
console.log('\\n=== Japanese Plurals ===');
const ja = new PluralHandler('ja');
ja.demo();

// locales/en/common.json — English: one/other
{
    "items": "{count} item",
    "items_plural": "{count} items",
    "items_plural_0": "No items",
    "notifications": "You have {count, plural, =0 {no notifications} one {# notification} other {# notifications}}."
}

// locales/ru/common.json — Russian: one/few/many/other
{
    "items_plural_one": "{count} элемент",
    "items_plural_few": "{count} элемента",
    "items_plural_many": "{count} элементов",
    "items_plural_other": "{count} элемента",
    "notifications": "У вас {count, plural, one {{count} уведомление} few {{count} уведомления} many {{count} уведомлений} other {{count} уведомления}}."
}

// locales/ar/common.json — Arabic: zero/one/two/few/many/other
{
    "notifications": "لديك {count, plural, zero {لا توجد إشعارات} one {إشعار واحد} two {إشعاران} few {{count} إشعارات} many {{count} إشعارًا} other {{count} إشعار}}."
}

// locales/ja/common.json — Japanese: no plural form needed
{
    "items": "{count}個のアイテム",
    "notifications": "通知が{count}件あります"
}

// components/ItemCounter.jsx — Plural-safe item display
import { useTranslation } from 'react-i18next';

function ItemCounter({ count, type }) {
    const { t, i18n } = useTranslation();

    // Approach 1: i18next's built-in plural suffix
    const label1 = t('items', { count });

    // Approach 2: ICU MessageFormat in translation
    const label2 = t('items_icu', { count });

    // Approach 3: Manual with Intl.PluralRules
    const pluralRules = new Intl.PluralRules(i18n.language);
    const category = pluralRules.select(count);

    const labels = {
        en: {
            zero: 'No items',
            one: '1 item',
            other: '{count} items'
        },
        ru: {
            one: '{count} элемент',
            few: '{count} элемента',
            many: '{count} элементов',
            other: '{count} элемента'
        }
    };

    const localeLabels = labels[i18n.language] || labels.en;
    const label3 = (localeLabels[category] || localeLabels.other)
        .replace('{count}', count);

    return (
        <div className="item-counter">
            <p>{label1}</p>
            <p>{t('selected', { count })}</p>
        </div>
    );
}

// Translation file:
// "items": "{{count}} item",
// "items_plural": "{{count}} items",
// "items_plural_0": "No items",
// "selected": "{{count}} selected",
// "selected_plural": "{{count}} selected"

// i18n/ordinals.js — Ordinal pluralization (1st, 2nd, 3rd, 4th)
function getOrdinal(count, locale = 'en') {
    const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
    const category = rules.select(count);

    const ordinalForms = {
        en: {
            one: count + 'st',
            two: count + 'nd',
            few: count + 'rd',
            other: count + 'th'
        },
        fr: {
            one: count + 'er',
            other: count + 'e'
        },
        de: {
            other: count + '.'
        },
        es: {
            other: count + '.°'
        }
    };

    const forms = ordinalForms[locale] || ordinalForms.en;
    return forms[category] || forms.other;
}

console.log(getOrdinal(1, 'en'));   // 1st
console.log(getOrdinal(2, 'en'));   // 2nd
console.log(getOrdinal(3, 'en'));   // 3rd
console.log(getOrdinal(4, 'en'));   // 4th
console.log(getOrdinal(21, 'en'));  // 21st
console.log(getOrdinal(1, 'fr'));   // 1er
console.log(getOrdinal(2, 'fr'));   // 2e
console.log(getOrdinal(3, 'de'));   // 3.