# gt-next: General Translation Next.js SDK: Branch
URL: https://generaltranslation.com/fr/docs/next/api/components/branch.mdx
---
title: Branch
description: Référence de l’API pour le composant Branch
---

{/* AUTO-GÉNÉRÉ : Ne modifiez pas ce fichier directement. Modifiez plutôt le modèle 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>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>
```

Vous passez une valeur au paramètre `branch`, puis celle-ci est 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 branche à afficher.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'Contenu de secours',
      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 correspondant à des branches possibles.
Par exemple, vous pouvez ajouter des branches comme `active` et `inactive` en tant que paramètres.

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

### Renvoie

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

### Lève une erreur

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

## Exemples

### Utilisation de base

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

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

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

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 si vous préférez)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenu de secours

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

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

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 voulez traduire ce contenu, placez-le dans un composant `<T>`.

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

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 branche, veillez à les entourer des composants `<Currency>`, `<DateTime>`, `<Num>` ou `<Var>`.

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

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

## Étapes suivantes

* Pour des cas d’usage plus avancés et des exemples, consultez [Using Branching Components](/docs/next/guides/branches).