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

title: derive
description: Marquez des variantes de contenu en nombre fini dans une traduction de chaîne afin de les extraire avec General Translation gt-react. Référence de l’API pour derive.

---

La fonction `derive` permet d’utiliser des appels de fonction statiques ou des expressions de variable dans une traduction de chaîne. C’est l’équivalent, pour les chaînes, du composant [`<Derive>`](/docs/react/reference/components/derive), utile pour réutiliser du code, internationaliser des phrases fragmentées et préserver l’accord des mots.

*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]

Encapsulez un appel de fonction ou une expression dont le résultat varie. Le CLI énumère tous les résultats possibles et crée une entrée de traduction pour chacun.

```tsx
const getDisplayName = (condition) => (condition ? 'User' : 'Admin');

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crée deux entrées :
// "User says hello."  -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

*Remarque : `derive` crée une entrée de traduction distincte pour chaque résultat possible, ce qui peut augmenter considérablement le nombre de traductions. Utilisez-le avec discernement et privilégiez les expressions `select` d’ICU lorsque le facteur multiplicatif devient excessif.*

## Fonctionnement [#how-it-works]

* **Analyse au build.** Le CLI analyse l’expression encapsulée, détermine toutes les valeurs de retour statiques possibles et crée une entrée de traduction distincte pour chacune. Cela préserve les accords, la conjugaison et l’ordre des mots d’une langue à l’autre.
* **Inchangé au runtime.** `derive` renvoie son argument tel quel au runtime ; la dérivation n’affecte que l’extraction. Exécutez `gt validate` après avoir ajouté ou modifié des appels à `derive` afin de confirmer que le CLI peut résoudre chaque expression.
* **Contrainte de statisme.** Seul le contenu connu au build peut être dérivé. Encapsulez tout contenu dynamique avec [`declareVar`](/docs/react/reference/functions/declare-var).
* **Performances.** Comme [`<Derive>`](/docs/react/reference/components/derive), plusieurs appels à `derive` dans une même chaîne multiplient le nombre total d’entrées.

## Paramètres [#parameters]

| Paramètre             | Description                                                | Type                                               | Facultatif | Valeur par défaut |
| --------------------- | ---------------------------------------------------------- | -------------------------------------------------- | ---------- | ----------------- |
| [`content`](#content) | Une expression statique qui renvoie du contenu à traduire. | `string \| boolean \| number \| null \| undefined` | Non        | —                 |

### `content` [#content]

**Type** `string | boolean | number | null | undefined` · **Obligatoire**

Un appel de fonction statique ou une expression dont les résultats possibles peuvent être analysés au moment du build.

## Returns [#returns]

**Type** `T`

Renvoie `content` tel quel, en conservant son type `T`.

## Exemples [#examples]

```tsx title="FragmentedSentence.tsx"
import { derive, gt } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
// "The boy is playing"  -> "El niño está jugando"
// "The girl is playing" -> "La niña está jugando"
```

```tsx title="WithVariables.tsx"
import { derive, declareVar, gt } from 'gt-react';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```

```tsx title="ComplexFunction.tsx"
import { derive, gt } from 'gt-react';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```

```tsx title="InlineExpression.tsx"
import { derive, gt } from 'gt-react';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

## Remarques [#notes]

* Utilisez `derive` avec discernement : cela peut augmenter exponentiellement le nombre d’entrées de traduction.
* Tous les résultats possibles doivent pouvoir être analysés statiquement au build.
* Encapsulez les valeurs dynamiques au sein des fonctions dérivées dans [`declareVar`](/docs/react/reference/functions/declare-var).
* Pour la forme JSX, consultez le composant [`<Derive>`](/docs/react/reference/components/derive).