# General Translation React SDKs (gt-react, gt-next): Gestion des pluriels et des branches
URL: https://generaltranslation.com/fr/docs/react/guides/handling-plurals-and-branches.mdx
---

title: Gestion des pluriels et des branches
description: Comment afficher un contenu dépendant d’un nombre ou d’une condition avec les composants <Plural> et <Branch> de General Translation dans React, Next.js, TanStack Start et React Native.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

Un texte qui varie selon un nombre ou une condition ne peut pas être une simple chaîne statique, car les autres langues gèrent les pluriels et les variantes différemment. Utilisez [`<Plural>`](/docs/react/reference/components/plural) pour les nombres et [`<Branch>`](/docs/react/reference/components/branch) pour les autres conditions afin que chaque variante soit correctement traduite. Les deux composants fonctionnent de la même façon dans tous les frameworks ; seul le package d’import diffère.

## Gérer le pluriel avec `<Plural>` [#plural]

Passez le nombre via `n` et fournissez un élément enfant pour chaque forme du pluriel. General Translation choisit la forme appropriée pour le paramètre régional actif en appliquant les règles de pluriel de ce paramètre régional.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

Indiquez les catégories de pluriel utilisées par votre langue source (généralement `one` et `other`) ; les traducteurs fourniront celles dont chaque langue cible a besoin, par exemple `zero`, `two`, `few` et `many`.

## Effectuer un branchement selon une valeur avec `<Branch>` [#branch]

Utilisez `<Branch>` pour sélectionner du contenu en fonction d’une valeur arbitraire. Passez la valeur via `branch` et fournissez un élément enfant pour chaque valeur possible, ainsi que `children` comme contenu de secours. Importez `Branch` depuis le même package que [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

Chaque élément enfant de `<Branch>` est traduit indépendamment, pour que chaque variante soit naturelle dans toutes les langues.

*Remarque : le composant `<Branch>` ignore tous les attributs `data-*`. La règle [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) du linter les signale.*
## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries