Pluralization

The SDK supports both simple two-form pluralization (singular/plural) and full CLDR plural forms (zero, one, two, few, many, other). It uses the browser's built-in Intl.PluralRules API — no CLDR data is shipped with the SDK.

Simple Two-Form

For most use cases, use babelize.p() with a singular and plural form:

babelize.p("{count} item", "{count} items", 1);  // "1 item"
babelize.p("{count} item", "{count} items", 5);  // "5 items"

The third argument can be a number or a vars object:

babelize.p("{count} item", "{count} items", { count: items.length });

Intl.PluralRules automatically selects the correct form based on the current locale and count:

// Polish has three plural forms
babelize.setLocale("pl");
babelize.p("{count} element", "{count} elementów", 1);  // "1 element" (one)
babelize.p("{count} element", "{count} elementów", 2);  // "2 elementy" (few)
babelize.p("{count} element", "{count} elementów", 5);  // "5 elementów" (many)

// Japanese has no grammatical plurals
babelize.setLocale("ja");
babelize.p("{count} item", "{count} items", 1);  // "1 項目" (other)
babelize.p("{count} item", "{count} items", 10); // "10 項目" (other)

// Arabic has six forms
babelize.setLocale("ar");
babelize.p("{count} عنصر", "{count} عناصر", 0);  // zero form
babelize.p("{count} عنصر", "{count} عناصر", 1);  // one form
babelize.p("{count} عنصر", "{count} عناصر", 2);  // two form

Explicit CLDR Forms

For full control, use babelize.plural() with all the forms you need:

babelize.plural(
  {
    zero: "No items",
    one: "{count} item",
    two: "{count} items",
    few: "{count} items",
    many: "{count} items",
    other: "{count} items",
  },
  { count: items.length },
);

The SDK selects the appropriate form for the current locale using Intl.PluralRules. Not all forms are used by every locale:

Language	Forms Used
English	`one`, `other`
Japanese	`other` (no grammatical plurals)
French	`one`, `other`
Polish	`one`, `few`, `many`, `other`
Arabic	`zero`, `one`, `two`, `few`, `many`, `other`
Russian	`one`, `few`, `many`, `other`

In React

function ItemCounter({ items }: { items: string[] }) {
  const babelize = useBabelize();

  return (
    <div>
      <p>{babelize.p("{count} item", "{count} items", items.length)}</p>
      <p>{babelize.plural(
        { one: "Found {count} result", other: "Found {count} results" },
        { count: items.length },
      )}</p>
    </div>
  );
}

Lockfile Storage

Plurals are stored in a dedicated plurals section of the lockfile:

{
  "plurals": {
    "{count} item": {
      "forms": ["one", "other"],
      "en": {
        "one": "{count} item",
        "other": "{count} items"
      },
      "pl": {
        "one": "{count} element",
        "few": "{count} elementy",
        "many": "{count} elementów",
        "other": "{count} elementu"
      },
      "ar": {
        "zero": "لا {count} عناصر",
        "one": "{count} عنصر",
        "two": "{count} عنصرين",
        "few": "{count} عناصر",
        "many": "عنصر {count}",
        "other": "{count} عنصرًا"
      }
    }
  }
}

Each entry stores the locale's forms separately. The lockfile is generated by the build plugin at compile time.

Pluralization

Simple Two-Form

Explicit CLDR Forms

In React

Lockfile Storage

On this page