# gt-react: General Translation React SDK: Plural
URL: https://generaltranslation.com/fr/docs/react/api/components/plural.mdx
---
title: Plural
description: Référence de l’API du composant Plural
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Nous utilisons le composant `<Plural>` pour gérer l’accord dans les phrases.
Pensez à la différence entre les phrases : &quot;Vous avez un élément.&quot; et &quot;Vous avez deux éléments.&quot;

En anglais, vous devez définir deux phrases différentes selon le nombre d’éléments.
Dans d’autres langues, vous pouvez devoir en définir jusqu’à six.

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


## Référence

### Props

<TypeTable
  type={{
  "n": {
    description: 'Le nombre utilisé pour déterminer la forme du pluriel.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: "Valeur de repli si aucune forme plurielle ne correspond",
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

La syntaxe `[key]: string` indique des clés arbitraires représentant des branches possibles de pluralisation.
Par exemple, des branches comme `singular` et `plural` peuvent être ajoutées comme paramètres.

### Description

| Nom de la prop  | Description                                                                                                                                                                                                                                                                                                                                                                                |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `n`             | Nombre utilisé pour déterminer la forme du pluriel. Cette prop est requise pour la pluralisation.                                                                                                                                                                                                                                                                                          |
| `children`      | Valeur de repli à afficher si aucune branche de pluriel correspondante n&#39;est trouvée.                                                                                                                                                                                                                                                                                                  |
| `locales`       | Valeur `locales` facultative pour préciser le paramètre régional de formatage. Si elle n&#39;est pas fournie, le paramètre régional par défaut de l&#39;utilisateur est utilisé. Pour en savoir plus sur la manière de spécifier les paramètres régionaux, consultez [cette page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |
| `[key]: string` | Branches représentant les différentes formes du pluriel. Les branches exactes dépendent du paramètre régional.                                                                                                                                                                                                                                                                             |

### Renvoie

`JSX.Element` contenant le contenu correspondant à la forme plurielle de `n`, ou la valeur de repli.

### Génère une erreur

`Error` si `n` n’est pas fourni ou n’est pas un nombre valide.

***

## Quelles formes dois-je ajouter ?

Vous devez utiliser uniquement les formes du pluriel de votre langue.

Les formes possibles sont : `"singular"`, `"plural"`, `"dual"`, `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, `"other"`.

* Si vous êtes développeur et utilisez `"en-US"`, n’en utilisez que deux : `"singular"` et `"plural"`.
* Si vous êtes développeur en `"zh-CN"`, utilisez uniquement `"other"`.

Pour en savoir plus sur les différentes formes, consultez [cette page](https://cldr.unicode.org/index/cldr-spec/plural-rules).

***

## Exemples

### Utilisation de base

Utilisez le composant `<Plural>` pour gérer le pluriel.

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

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


### Valeurs de repli

Vous pouvez définir une valeur de repli si la valeur passée à `n` ne correspond à aucune branche.

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={Vous avez un article.}
    >
      Vous avez plusieurs articles. // [!code highlight]
    </Plural>
  );
}
```


### Traduction des pluriels

Pour traduire, il vous suffit d&#39;ajouter le composant `<T>`.

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

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]
    />
  );
}
```


### Ajout de variables

Et si l’on voulait ajouter des variables à la phrase au pluriel ?

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

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]
    />
  );
}
```

À l’intérieur d’un composant `<T>`, encapsulez tout contenu dynamique dans un élément `<Currency>`, `<DateTime>`, `<Num>` ou `<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>
```

***


## Remarques

* Le composant `<Plural>` sert à gérer le pluriel.
* Les catégories de pluriel disponibles (par ex. one, other, few, many) dépendent du paramètre régional et suivent les [règles de pluralisation de l’Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).

## Étapes suivantes

* Pour plus d’exemples, consultez la documentation de référence sur [l’utilisation des composants de branche](/docs/react/guides/branches).
* Pour une utilisation plus avancée, combinez `<Plural>` avec des composants de variable comme `<Currency>`, `<DateTime>`, `<Num>` et `<Var>`. Pour en savoir plus, consultez [l’utilisation des composants de variable](/docs/react/guides/variables).