# gt-react: General Translation React SDK: useGT
URL: https://generaltranslation.com/fr/docs/react/api/strings/use-gt.mdx
---
title: useGT
description: Référence de l’API pour la fonction useGT de traduction de chaînes
---

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


## Vue d’ensemble

La fonction `useGT` est un hook permettant de traduire des chaînes pendant le build.

```jsx
const gt = useGT();

<p>{gt('This text will be translated')}</p>;
```

<Callout>
  **Traduction au build :** les traductions `useGT` s’effectuent au build, avant
  le déploiement de votre application. Bien que vous puissiez passer des variables dans la chaîne traduite, vous
  ne pouvez traduire que du contenu connu au moment du build.
</Callout>


## Référence

### Paramètres

Aucun

### Renvoie

Une fonction de rappel, `gt`, qui traduit le contenu fourni.

```jsx
(content: string, options?: InlineTranslationOptions) => string
```

| Nom        | Type                                                                           | Description                                                                |
| ---------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| `content`  | `string`                                                                       | Le contenu textuel à traduire.                                             |
| `options?` | [`InlineTranslationOptions`](/docs/react/api/types/inline-translation-options) | Options de traduction permettant de personnaliser le comportement de `gt`. |

***


## Comportement

### Production

Lors du processus de CD, tout contenu passé à une fonction `gt` sera traduit avant le déploiement de votre application.
Cela garantit des temps de chargement rapides pour tous les paramètres régionaux, mais ne peut traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées sur le CDN, soit (2) stockées dans la sortie de build de votre application, selon votre configuration.
À partir de là, le contenu traduit est servi à vos utilisateurs.
Si aucune traduction n&#39;est trouvée, le contenu d&#39;origine sera utilisé par défaut.

Assurez-vous de suivre le [guide de déploiement disponible ici](/docs/react/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `gt` traduira le contenu à la demande.
C’est utile pour visualiser l’apparence de votre application dans différentes langues.
N’oubliez pas d’ajouter une clé d’API Dev à votre environnement pour activer ce comportement.

Vous constaterez un délai lors de la traduction à la demande en développement.
Cela ne se produira pas dans les builds de production, sauf si du contenu est explicitement traduit à la demande.

***

## Exemple

### Utilisation de base

Vous pouvez utiliser `useGT` pour traduire des chaînes de caractères.

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

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, Alice!')}</p>;
}
```

Remarque : &quot;Alice&quot; sera traduit dans la langue préférée de l&#39;utilisateur.


### Utilisation de variables [#variables]

Vous pouvez passer des variables aux traductions du dictionnaire.

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

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, {name}!', { name: 'Alice' })}</p>;
}
```

Remarque : &quot;Alice&quot; ne sera pas traduit dans la langue préférée de l’utilisateur, car il s’agit d’une variable.


### Utiliser le format de message ICU

`gt-react` prend en charge le format de message ICU, ce qui vous permet aussi de mettre en forme vos variables.

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

export default function TranslateGreeting() {
  const gt = useGT();
  return (
    <p>
      {gt(
        'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
        { count: 10 }
      )}
    </p>
  );
}
```

<Callout>
  Le format de message ICU est un moyen puissant de mettre en forme vos variables. Pour plus
  d’informations, consultez la [documentation sur le format de message
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>

### Importer depuis `gt-react`

Si vous utilisez la directive `"use client"`, importez depuis `gt-react` plutôt que depuis `gt-react`.

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

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, Alice!')}</p>;
}
```

***


## Remarques

* La fonction `useGT` est un hook qui traduit des chaînes.
* La traduction des chaînes avec `useGT` a lieu avant l’exécution, pendant le processus de build (sauf en développement).