# gt-next: General Translation Next.js SDK: Plural
URL: https://generaltranslation.com/en-GB/docs/next/api/components/plural.mdx
---
title: Plural
description: API reference for the Plural component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

We use the `<Plural>` component to handle pluralised sentences.
Think of the difference between the sentences: &quot;You have one item.&quot; and &quot;You have two items.&quot;

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

```jsx
const count = 1;
<Plural n={count}
  one={You have one item.}
  other={You have some items.}
/>
```


## Reference

### Props

<TypeTable
  type={{
  "n": {
    description: 'The number used to determine the plural form.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: 'Fallback when no plural forms match',
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

The `[key]: string` syntax indicates arbitrary keys for possible pluralisation branches.
For example, branches such as `singular` and `plural` can be added as parameters.

### Description

| Prop Name       | Description                                                                                                                                                                                                                                                    |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`             | The number used to determine the plural form. This is required for pluralisation.                                                                                                                                                                              |
| `children`      | Fallback content to render if no matching plural branch is found.                                                                                                                                                                                              |
| `locales`       | Optional locales used to specify the formatting locale. If not provided, the user’s default locale is used. Read more about specifying locales [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |
| `[key]: string` | Branches representing plural forms. The exact branches depend on the locale.                                                                                                                                                                                   |

### Returns

`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 are a developer using `"en-US"`, only use two: `"singular"` and `"plural"`.
* If you are a developer using `"zh-CN"`, only use `"other"`.

Read more about the different forms [here](https://cldr.unicode.org/index/cldr-spec/plural-rules).

***

## Examples

### Basic usage

Use the `<Plural>` component to handle pluralisation.

```jsx title="BasicExample.jsx" copy
import { Plural } from 'gt-next';

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


### Fallbacks

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

```jsx title="FallbackExample.jsx" copy
import { Plural } from 'gt-next';

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


### Translating plurals

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

```jsx title="PluralExample.jsx" copy
import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      one={You have an item.} // [!code highlight]
      other={You have some items.} // [!code highlight]
    />
  );
}
```


### Adding variables

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

```jsx title="PluralExample.jsx" copy
import { T, Plural, Num } from 'gt-next';

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

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

```jsx
<T id="itemCount">
  <Plural n={count}
    one={You have <Num>{count}</Num> item.} // [!code highlight]
    other={You have <Num>{count}</Num> items.} // [!code highlight]
  />
</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 [Unicode CLDR pluralisation rules](https://cldr.unicode.org/index/cldr-spec/plural-rules).

## Next steps

* For more examples, see the reference documentation on [Using Branching Components](/docs/next/guides/branches).
* For more advanced usage, combine `<Plural>` with variable components such as `<Currency>`, `<DateTime>`, `<Num>`, and `<Var>`. Read more about [Using Variable Components](/docs/next/guides/variables).