Plural

Plural is the Component Macro counterpart to the core plural macro.

It represents the same ICU plural logic, but authored as component props in markup. This is useful when the surrounding file is already template-heavy and the component form is easier to scan than a function call.

Standard ICU plural categories (zero, one, two, few, many, other) are used as plain prop names. Exact-value matches use an underscore-prefixed number: _0="No items" matches exactly when value is 0, taking precedence over the category-based props.

For the framework-agnostic Lingui semantics, see the official Plural reference.

Source

Demo.svelte Catalog

<p>
  <Plural value={count} one="# file" other="# files" />
</p>

#: src/demos/macros/plural-component/Demo.svelte
msgid "{count, plural, one {# file} other {# files}}"
msgstr "{count, plural, one {# file} other {# files}}"

Result

Preview Transformed Svelte Compiled Catalog

3 files

<p>
  <L4sRuntimeTrans {.../*i18n*/
  {
    id: "eM80Pk",
    values: {
      count: count
    }
  }} />
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"eM80Pk\":[[\"count\",\"plural\",{\"one\":[\"#\",\" file\"],\"other\":[\"#\",\" files\"]}]]}",
) as Messages;

Locale

EN JA

Count

Usage

Svelte

<script lang="ts">
  import { Plural } from "lingui-for-svelte/macro";

  let count = $state(3);
</script>

<Plural value={count} one="# file" other="# files" />

Astro

---
import { Plural } from "lingui-for-astro/macro";

const count = 3;
---

<Plural value={count} one="# file" other="# files" />

Official Lingui

import { Plural } from "@lingui/react/macro";

function Component() {
  return <Plural value={count} one="# file" other="# files" />;
}

Exact value match

Prefix a number with _ to match an exact value. Exact matches take precedence over category props.

<Plural value={count} _0="No files" one="# file" other="# files" />

The function form uses a plain numeric key for the same effect:

<p>{$plural(count, { 0: 'No files', one: '# file', other: '# files' })}</p>

When Plural is a good fit

• you are already writing markup and want the plural branches inline there
• the component form is clearer to read than plural(...)
• you want the same plural semantics as the core macro