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

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


## Vue d’ensemble

Le composant `<T>` est la principale méthode de traduction de `gt-react`.

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

Le composant `<T>` permet de traduire aussi bien du texte brut que des structures JSX complexes.
De plus, il offre des fonctionnalités pour gérer les variables, les pluriels et les traductions dépendantes du contexte.

<Callout>
  **Traduction au build :**
  les traductions avec `<T>` s’effectuent au build.
  Cela signifie que la traduction a lieu avant le déploiement afin de réduire la latence.
  Veillez à suivre le [guide de déploiement ici](/docs/react/tutorials/quickdeploy).
</Callout>

## Référence

### Props

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descriptions

| Prop       | Description                                                                                                            |
| ---------- | ---------------------------------------------------------------------------------------------------------------------- |
| `children` | Le contenu à traduire. Il peut inclure du texte brut ou des structures JSX.                                            |
| `id`       | Un identifiant unique pour la chaîne de traduction. Il garantit une traduction cohérente dans toute votre application. |
| `context`  | Un contexte supplémentaire pour affiner la traduction. Utile pour désambiguïser les expressions.                       |

### Renvoie

`React.JSX.Element|undefined` qui contient la traduction affichée ou le contenu de remplacement, selon la configuration fournie.

***

## Comportement

### Production

Pendant le processus de CD, tout contenu enfant à l’intérieur d’un `<T>` 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 permet de traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans 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’est trouvée, le contenu d’origine est utilisé par défaut.

Veillez à suivre le [guide de déploiement ici](/docs/react/tutorials/quickdeploy).

### Développement

Pendant le développement, `<T>` traduit le contenu à la demande.
C’est utile pour visualiser à quoi ressemblera votre application dans différentes langues.
N’oubliez pas d’ajouter une clé d’API de développement à votre environnement pour activer ce comportement.

Pendant le chargement, `<T>` renvoie `undefined`, sauf si les langues sont proches (en-US vs en-GB), même si ce comportement peut être personnalisé via les paramètres de rendu.
En cas d’erreur, `<T>` renvoie le contenu d’origine.

Vous constaterez un délai lors de la traduction à la demande en développement.
Ce délai n’existe pas dans les builds de production, car tout est déjà traduit.

***

## Exemples

### Utilisation de base

Le composant `<T>` peut traduire des chaînes simples à l’aide d’un `id` et de son contenu enfant.
N’oubliez pas que le composant `<T>` doit être utilisé au sein d’un [`<GTProvider>`](/docs/react/api/components/gtprovider) pour accéder aux traductions.

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

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> // [!code highlight]
    );
}
```


### Avec des variables

Le composant `<T>` peut inclure des variables pour insérer du contenu dynamique dans les traductions.

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

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}
```


### Avec les pluriels

Le composant `<T>` prend également en charge le pluriel via le composant `<Plural>`.

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### Limitations

Le composant `<T>` ne traduit pas le contenu qui est dynamique.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // va générer une erreur // [!code highlight]
        </T>
    );
}
```

La fonction `<T>` traduit ses éléments enfants.

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

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // sera traduit // [!code highlight]

            <ValidTranslation> // sera traduit // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // ne sera pas traduit
        </T>
    );
}
```

<Callout>
  **Remarque :** En règle générale, tout contenu situé *littéralement* entre les deux balises `<T>` du fichier sera traduit.
  Vous pouvez toujours ajouter une autre balise `<T>` pour traduire le contenu qui ne l’est pas, même s’il est déconseillé d’imbriquer des composants `<T>`.
</Callout>

***


## Remarques

* Le composant `<T>` est conçu pour traduire le contenu de votre application. Il s’agit de la principale méthode de localisation dans `gt-react`.
* Utilisez le composant `<T>` pour traduire du texte brut ou des structures JSX, y compris avec des variables et la gestion du pluriel.
* Assurez-vous que le composant `<T>` est inclus dans un [`<GTProvider>`](/docs/react/api/components/gtprovider) afin d’accéder au contexte de traduction.

## Étapes suivantes

* Pour des fonctionnalités plus avancées, comme la traduction à la demande, les variables, le contexte et la gestion des pluriels, consultez la documentation sur les [`modèles d’utilisation de <T>`](/docs/react/guides/t).
* Pour traduire des chaînes, consultez [`useGT`](/docs/react/api/strings/use-gt).