Overview

We use the <Plural> component to handle sentence conjugation. Consider the difference between the sentences: "You have one item." and "You have two items."

In English, you need to define two different sentences based on the number of items. In other languages, you may need to define up to six.

const count = 1;
<Plural n={count}
  singular={You have one item.}
  plural={You have some items.}
/>

Reference

Props

The [key]: string syntax denotes arbitrary keys representing potential pluralisation branches. For example, branches such as singular and plural can be added as parameters.

Description

Returns

A JSX.Element containing the content corresponding to the plural form of n, or the fallback content.

Throws

Error if n is not provided or is not a valid number.

Which forms should I add?

You only need to use the plural forms for your language.

The possible forms are: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other".

• If you’re a developer using "en-US", use just two: "singular" and "plural".
• If you’re a developer using "zh-CN", use only "other".

Read more about the different forms here.

Examples

Basic usage

Use the <Plural> component to handle pluralisation.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={You have one item.}
      plural={You have some items.}
    />
  );
}

Fallbacks

You can provide a fallback if the value passed to n has no matching branches.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}

Translating plurals

All you need to do to translate is add the <T> component.

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={You have an item.} 
      plural={You have some items.} 
    />
  );
}

Adding variables

What if we want to add some variables to the pluralised sentence?

import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have <Num>{count}</Num> item.} 
      plural={You have <Num>{count}</Num> items.} 
    />
  );
}

When inside a <T> component, wrap all dynamic content with a <Currency>, <DateTime>, <Num>, or <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={You have <Num>{count}</Num> item.} 
    plural={You have <Num>{count}</Num> items.} 
  />
</T>

Notes

• The <Plural> component is used to handle pluralisation.
• The available plural branches (e.g., one, other, few, many) depend on the locale and follow the Unicode CLDR pluralisation rules.

Next steps

• For more examples, check out the reference doc on branching components here.
• For more advanced usage, combine <Plural> with variable components such as <Currency>, <DateTime>, <Num>, and <Var>. Read more about variable components here.