# General Translation React SDKs (gt-react, gt-next): Branch
URL: https://generaltranslation.com/fr/docs/react/reference/components/branch.mdx
---

title: Branch
description: Affiche le contenu de façon conditionnelle selon une valeur avec General Translation gt-react. Référence de l’API pour Branch.

---

Le composant `<Branch>` ajoute une logique conditionnelle à une traduction. Vous passez une valeur à `branch`, et il affiche la prop enfant correspondante.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Renseignez une valeur `branch` et une prop enfant pour chaque valeur possible.

```tsx
<Branch
  branch={status}
  active={<p>The user is active.</p>}
  inactive={<p>The user is inactive.</p>}
/>
```

*Remarque : placez `<Branch>` dans un [`<T>`](/docs/react/reference/components/t) pour traduire les branches, et encapsulez les valeurs dynamiques qu’elles contiennent dans un composant de variable comme [`<Var>`](/docs/react/reference/components/var).*

## Fonctionnement [#how-it-works]

* **Correspondance des valeurs.** La valeur `branch` est comparée aux clés de props que vous fournissez. Le contenu de la prop correspondante s’affiche.
* **Contenu de secours.** Si `branch` est omis ou si sa valeur ne correspond à aucune clé de prop, `children` s’affiche comme contenu de secours. `<Branch>` ne lève jamais d’erreur.

## Props [#props]

| Prop                    | Description                                         | Type                          | Facultatif | Par défaut |
| ----------------------- | --------------------------------------------------- | ----------------------------- | ---------- | ---------- |
| [`branch`](#branch)     | La valeur qui détermine le contenu à afficher.      | `string \| number \| boolean` | Oui        | —          |
| [`children`](#children) | Contenu de secours si aucune branche ne correspond. | `ReactNode`                   | Oui        | —          |
| [`[value]`](#value)     | Contenu associé à une valeur de branche donnée.     | `ReactNode`                   | Oui        | —          |

### `branch` [#branch]

**Type** `string | number | boolean` · **Facultatif**

Valeur utilisée pour sélectionner la branche à afficher. Si `branch` est omis ou si sa valeur ne correspond à aucune clé de prop de branche, `children` s’affiche à la place comme contenu de secours.

### `children` [#children]

**Type** `ReactNode` · **Facultatif**

Contenu de secours affiché lorsqu’aucune prop `branch` ne correspond à la valeur de `branch`.

### `[value]` [#value]

**Type** `ReactNode` · **Facultatif**

Une prop pour chaque valeur possible de `branch`. Chaque clé correspond à une valeur de `branch`, et son contenu s’affiche lorsque cette valeur est sélectionnée. Une chaîne de caractères est acceptée à la place du JSX.

## Exemples [#examples]

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // une chaîne simple fonctionne aussi
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight] contenu de secours
    </Branch>
  );
}
```

```tsx title="BranchExample.tsx"
import { T, Branch, Var } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <T>
      <Branch
        branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

## Remarques [#notes]

* Les clés de branche peuvent être n’importe quelle chaîne de caractères correspondant à la prop `branch`, ce qui permet à `<Branch>` de s’adapter à de nombreux cas d’usage.
* Combinez `<Branch>` avec [`<T>`](/docs/react/reference/components/t) et des [composants variables](/docs/react/guides/formatting-variables) pour obtenir un contenu traduit et dynamique.
* Pour le contenu basé sur un nombre, utilisez [`<Plural>`](/docs/react/reference/components/plural).