# gt-react: General Translation React SDK: derive
URL: https://generaltranslation.com/fr/docs/react/api/strings/derive.mdx
---
title: derive
description: Référence de l’API de la fonction de chaîne derive()
---

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


## Vue d’ensemble

La fonction `derive` permet d’utiliser des appels de fonction statiques ou des expressions de variable dans la traduction d’une chaîne.
Cela est utile pour écrire du code réutilisable, internationaliser des phrases fragmentées et préserver l’accord des mots.

```jsx
const getDisplayName = (condition) => {
  return condition ? "User" : 'Admin';
};

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

Cela fonctionne en générant des traductions distinctes pour chaque résultat possible, ce qui permet de préserver les accords, la conjugaison et les changements d’ordre des mots d’une langue à l’autre.

<Callout>
  **Entrées de traduction multiples :**
  `derive` crée des entrées de traduction distinctes pour chaque résultat possible de la fonction encapsulée, ce qui peut augmenter considérablement le nombre de traductions.
  Utilisez cette fonctionnalité avec discernement et privilégiez les instructions `select` d’ICU lorsque le facteur multiplicatif devient trop élevé.
</Callout>

<Callout>
  **Analyse statique :**
  `derive` ne peut analyser que le contenu connu au moment du build.
  Tout contenu dynamique (variables, appels d’API, etc.) doit être encapsulé dans `declareVar`.
</Callout>

## Référence

### Paramètres

| Nom       | Type                                                         | Description                                                          |
| --------- | ------------------------------------------------------------ | -------------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Un appel à une fonction statique qui renvoie un contenu traduisible. |

### Retourne

Retourne `content` de type `T`.

***

## Fonctionnement

### Analyse au build

Pendant le build, l&#39;outil CLI :

1. Analyse la fonction encapsulée par `derive`
2. Détermine toutes les valeurs de retour possibles de la fonction (elles doivent être analysables statiquement au build)
3. Crée des entrées de traduction distinctes pour chaque résultat unique

### Considérations de performance

Comme `<Derive>`, `derive` multiplie les entrées de traduction.
Chaque appel de fonction pouvant produire plusieurs résultats crée des traductions distinctes, et plusieurs appels à `derive` dans une même chaîne multiplient exponentiellement le nombre total d’entrées.

***

## Exemple

### Contenu réutilisable

Vous pouvez utiliser `derive` pour gérer des phrases fragmentées ou créer du contenu réutilisable à l’aide d’appels de fonction.

```jsx copy
import { derive, gt } from 'gt-react';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Phrases fragmentées

Vous pouvez utiliser `derive` pour gérer les phrases fragmentées à l’aide d’appels de fonction.

```jsx copy
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>;
}
```


### Accord

Sans `derive`, traduire l’accord est syntaxiquement lourd.
Vous devez ajouter une instruction `select` pour gérer l’accord (pluriel, genre, etc.).
Ensuite, vous devez aussi énumérer chaque résultat possible.

```jsx copy
import { gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

Avec `derive`, gérer les accords devient trivial.
Aucune instruction select n’est nécessaire, et vous n’avez pas à énumérer tous les cas possibles.

```jsx copy
import { derive, declareVar, 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>;
}
```

En utilisant `derive`, l’outil CLI identifie que `getSubject` a deux issues possibles et crée une entrée de traduction pour chacune d’elles.
Ainsi, l’accord est géré automatiquement.

* &quot;Le garçon est en train de jouer&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;La fille est en train de jouer&quot; -&gt; &quot;*La* niña está jugando&quot;


### Avec des variables

Vous pouvez combiner `derive` et `declareVar` pour gérer du contenu dynamique.

```jsx copy
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>;
}
```


### Fonctions complexes

Les fonctions peuvent contenir plusieurs branches conditionnelles et plusieurs instructions `return`.

```jsx copy
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>;
}
```


### Expressions et logique intégrées

Vous pouvez intégrer de la logique directement dans l’appel à `derive`.

```jsx copy
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

* Utilisez `derive` avec parcimonie, car cela peut augmenter de façon exponentielle le nombre d’entrées de traduction
* Tous les résultats possibles doivent pouvoir être analysés statiquement au moment du build
* Les variables dans les fonctions statiques doivent être encapsulées dans `declareVar`

## Étapes suivantes

* Consultez [`declareVar`](/docs/react/api/strings/declare-var) pour marquer le contenu dynamique dans des fonctions statiques
* Consultez [`decodeVars`](/docs/react/api/strings/decode-vars) pour extraire les valeurs d’origine de variables déclarées
* Consultez [`<Derive>`](/docs/react/api/components/derive) pour son équivalent en JSX
* Consultez les [notes de version](/devlog/gt-next_v6_12_0) pour en savoir plus