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

## Vue d’ensemble

Le composant `<GTProvider>` fournit le contexte General Translation (GT) à ses composants enfants, ce qui leur permet d’accéder à du contenu traduit.
Il est nécessaire pour toute traduction côté client dans votre application.

### Quand l&#39;utiliser

* Enveloppez l&#39;ensemble de votre application dans `<GTProvider>` pour activer les traductions côté client.

* Le composant `<GTProvider>` est utilisé à la fois pour [le composant `<T>` inline](/docs/react/guides/t) et [les dictionnaires](/docs/react/guides/dictionaries).

## Référence

### Prop

<TypeTable
  type={{
children: {
type: 'ReactNode',
optional: false,
},
projectId: {
type: 'string',
optional: true,
},
'dictionary?': {
type: 'Dictionary',
optional: true,
default: 'defaultDictionary',
},
'locales?': {
type: 'string[]',
optional: true,
},
'defaultLocale?': {
type: 'string',
optional: true,
default: 'libraryDefaultLocale',
},
'locale?': {
type: 'string',
optional: true,
},
'cacheUrl?': {
type: 'string',
optional: true,
default: "'https://cdn.gtx.dev'",
},
'runtimeUrl?': {
type: 'string',
optional: true,
default: "'https://runtime.gtx.dev'",
},
'renderSettings?': {
type: 'RenderSettings',
optional: true,
default: 'defaultRenderSettings',
},
'_versionId?': {
type: 'string',
optional: true,
},
'devApiKey?': {
type: 'string',
optional: true,
},
'config?': {
type: 'object',
optional: true,
},
'loadTranslations?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'loadDictionary?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'region?': {
type: 'string',
optional: true,
},
'fallback?': {
type: 'ReactNode',
optional: true,
},
'customMapping?': {
type: 'CustomMapping',
optional: true,
},
'enableI18n?': {
type: 'boolean',
optional: true,
default: 'true',
},
}}
/>

### Description

| Prop                | Description                                                                                                                                                                                                                                                  |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`          | Tout composant, ou parent d’un composant, qui doit traduire du contenu ou accéder aux informations de traduction côté client. Cela inclut tous les composants qui utilisent `<T>`, `useGT` ou d’autres utilitaires de traduction.                            |
| `projectId?`        | L’identifiant de projet requis pour les services cloud de General Translation.                                                                                                                                                                               |
| `dictionary?`       | Le dictionnaire de traduction du projet.                                                                                                                                                                                                                     |
| `locales?`          | La liste des paramètres régionaux approuvés pour le projet.                                                                                                                                                                                                  |
| `defaultLocale?`    | Le paramètre régional par défaut à utiliser si aucun autre paramètre régional n’est trouvé.                                                                                                                                                                  |
| `locale?`           | Le paramètre régional actuel, s’il est déjà défini.                                                                                                                                                                                                          |
| `cacheUrl?`         | L’URL du service de cache pour récupérer les traductions.                                                                                                                                                                                                    |
| `runtimeUrl?`       | L’URL du service d’exécution pour récupérer les traductions.                                                                                                                                                                                                 |
| `renderSettings?`   | Les paramètres de rendu des traductions.                                                                                                                                                                                                                     |
| `_versionId?`       | L’identifiant de version pour récupérer les traductions.                                                                                                                                                                                                     |
| `devApiKey?`        | La clé API pour les environnements de développement.                                                                                                                                                                                                         |
| `config?`           | Un objet de configuration (généralement importé depuis `gt.config.json`) contenant `projectId`, `locales`, `defaultLocale` et d’autres paramètres. Une alternative à la transmission de ces valeurs comme props individuels.                                 |
| `loadTranslations?` | Une fonction asynchrone qui prend une chaîne de paramètre régional et renvoie l’objet de traductions correspondant. Utilisée pour charger des fichiers de traduction pré-générés à l’exécution. Consultez le [quickstart](/docs/react) pour son utilisation. |
| `loadDictionary?`   | Une fonction asynchrone qui prend une chaîne de paramètre régional et renvoie les traductions du dictionnaire pour ce paramètre régional.                                                                                                                    |
| `region?`           | Le code de région de l’utilisateur (par exemple, `US`, `GB`). Utilisé pour le formatage spécifique à une région.                                                                                                                                             |
| `fallback?`         | Contenu de secours personnalisé à afficher pendant le chargement des traductions.                                                                                                                                                                            |
| `customMapping?`    | Un mappage des noms de composants personnalisés vers leurs composants React, utilisé lors du rendu du JSX traduit.                                                                                                                                           |
| `enableI18n?`       | Indique s’il faut activer les fonctionnalités d’i18n. La valeur par défaut est `true`.                                                                                                                                                                       |

### Valeur de retour

`React.JSX.Element|undefined` contenant les éléments enfants passés à ce composant.

## Exemples

### Utilisation de base

Enveloppez votre application dans `<GTProvider>` pour y ajouter la traduction.
N&#39;oubliez pas d&#39;ajouter une [liste des paramètres régionaux pris en charge](/docs/platform/supported-locales) pour activer la traduction.

```jsx title="index.js" copy
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { GTProvider } from "gt-react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']}> // Activer l'espagnol et le français // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);
```


### Dictionnaires

Vous pouvez également transmettre un dictionnaire au composant `<GTProvider>`, puis y accéder via le hook [`useTranslations`](/docs/react/api/dictionary/use-translations).

```jsx title="index.js" copy
import dictionary from "./dictionary.js";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);
```

Pour en savoir plus sur l’utilisation des dictionnaires, consultez ce [guide](/docs/react/guides/dictionaries).


### Ajout d’une configuration

Si vous n’aimez pas passer des props directement au composant `<GTProvider>`, vous pouvez créer un fichier de configuration et le transmettre au composant.
Il s’intègre aussi directement à la [commande `gt translate`](/docs/cli/translate), ce qui vous évite de devoir spécifier manuellement certains éléments, comme les paramètres régionaux.

```json title="gt.config.json" copy
{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permet de revenir aux traductions précédentes (généré automatiquement par le CLI)
}
```

Il vous suffit de transmettre ceci au composant `<GTProvider>`.

```jsx title="index.js" copy
import config from "../gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);
```


### Chargeur de traductions personnalisé

Vous pouvez utiliser la prop `loadTranslations` pour charger les traductions depuis une source personnalisée.
C&#39;est utile lorsque vous devez charger les traductions depuis une autre source, par exemple une API personnalisée.

```jsx title="index.js" copy
import loadTranslations from "./loadTranslations";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);
```


### Paramètres de rendu

Les paramètres de rendu contrôlent le comportement de chargement des traductions.
Deux champs sont disponibles : `timeout` et `method`.

* `timeout` correspond au nombre de millisecondes à attendre qu’une traduction se charge avant d’afficher un contenu de secours (par défaut : `8000ms`).
* `method` correspond à la méthode utilisée pour charger les traductions (`"skeleton"`, `"replace"` ou `"default"`).

```jsx title="index.js" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  <App />
</GTProvider>
```

Chaque paramètre de rendu définit un comportement de chargement différent :
`"skeleton"` renverra `null` jusqu’à ce que les traductions soient chargées.
`"replace"` renverra le contenu de secours jusqu’à ce que les traductions soient chargées.
`"default"` renverra `null` jusqu’à ce que les traductions soient chargées, sauf si le paramètre régional de secours utilise la même langue que le paramètre régional actuel (c.-à-d. `en-US` et `en-GB`).
Dans ce cas, il renverra immédiatement le contenu de secours jusqu’à ce que les traductions soient chargées.

***


## Remarques

* `<GTProvider>` doit envelopper tous les composants [`<T>`](/docs/react/api/components/t) ainsi que les autres fonctions liées à la traduction. Pour en savoir plus, consultez [cette page](/docs/react/api/components/gtprovider).

## Étapes suivantes

* En savoir plus sur le composant [`<T>`](/docs/react/guides/t) pour traduire du texte et des composants.