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

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


## Vue d’ensemble

Le composant `<Branch>` vous permet d’ajouter une logique conditionnelle à une traduction.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>L'utilisateur est actif.</p>}
    inactive={<p>L'utilisateur est inactif.</p>}
/>
```

Vous transmettez une valeur au paramètre `branch`, qui est alors associée à une valeur de sortie selon les clés que vous fournissez.


## Référence

### Props

<TypeTable
  type={{
  "branch": {
      description: 'Le nom de la branch à afficher.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'Contenu de repli',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      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.
Par exemple, des branches comme `active` et `inactive` peuvent être ajoutées comme paramètres.

| Prop            | Description                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `branch`        | Le nom de la branch à afficher.                                                                                                                               |
| `children`      | Le contenu de repli à afficher si aucune branch correspondante n’est trouvée.                                                                                 |
| `[key]: string` | Des branches représentant les contenus possibles pour la valeur de branch donnée. Chaque clé correspond à une branch, et sa valeur est le contenu à afficher. |

### Renvoie

`JSX.Element` contenant le contenu correspondant à la branch spécifiée ou le contenu de repli.

### Lève une exception

`Error` si la prop `branch` n’est pas fournie ou n’est pas valide.

## Exemples

### Utilisation de base

`<Branch>` doit produire un rendu différent pour chaque valeur possible de la prop `branch`.

Dans cet exemple, la valeur `user.hairColor` est utilisée pour déterminer le rendu.
Nous avons défini les props `black`, `brown` et `blonde` afin de correspondre aux valeurs possibles de `user.hairColor`.

```jsx title="BranchExample.jsx" copy
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." // (vous pouvez passer une chaîne de caractères si vous préférez)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenu de repli

Les `children` servent toujours de contenu de repli si aucune prop ne correspond à la valeur transmise à `branch`.

```jsx title="BranchExample.jsx" copy
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]
    </Branch>
  );
}
```


### Traduire branch

Si vous souhaitez traduire le contenu, encapsulez-le dans un composant `<T>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### Ajout de variables

Si vous souhaitez afficher des valeurs dynamiques dans la branch, veillez à les entourer des composants `<Currency>`, `<DateTime>`, `<Num>` ou `<Var>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <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

* Les clés des branch peuvent être n’importe quelle chaîne de caractères correspondant à la prop branch. Cette flexibilité permet d’adapter facilement `<Branch>` à un large éventail de cas d’usage.
* Combinez `<Branch>` avec d’autres composants, comme `<T>` pour la traduction et les [composants variables](/docs/react/guides/variables) pour le contenu dynamique, afin de créer des interfaces riches et localisées.

## Étapes suivantes

* Pour des cas d’utilisation plus avancés et des exemples, consultez [Utiliser les composants Branch](/docs/react/guides/branches).