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

title: GTProvider
description: Fournit le paramètre régional actif et les traductions à une arborescence de composants `gt-react` de General Translation. Référence API de GTProvider.

---

Le composant `<GTProvider>` fournit le paramètre régional actif et ses traductions à une arborescence de composants `gt-react` générée côté serveur. Utilisez-le lorsque votre serveur charge les traductions et les transmet au client.

*Remarque : les SPA React initialisées avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) utilisent le cache de traduction global et n’ont pas besoin de provider.*

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

*Remarque : selon le framework, le paramètre régional et les traductions n’arrivent pas à `<GTProvider>` de la même manière. Dans `gt-react`, vous les transmettez comme props (ci-dessous) ; `gt-next`, `gt-tanstack-start` et `gt-react-native` les résolvent via leur propre configuration, documentée dans la section de chaque framework.*

## Vue d’ensemble [#overview]

Enveloppez votre application dans `<GTProvider>` après l’[initialisation](/docs/react/reference/config#initialization). Transmettez le `locale` actif ainsi que les `translations` pour ce `locale`, chargées avec [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot).

```tsx
import { GTProvider } from 'gt-react';

<GTProvider locale={locale} translations={translations}>
  <App />
</GTProvider>
```

*Remarque : [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) et les identifiants doivent être fournis dans l’[appel d’initialisation](/docs/react/reference/config#initialization), et non dans `<GTProvider>`. Le provider utilise de façon synchrone le paramètre régional résolu et les traductions.*

<Callout type="info">
  **Modifié dans la v11 :** le `<GTProvider>` de `gt-react` n’accepte plus `config`, `loadTranslations`, `loadDictionary` ni les identifiants. Déplacez-les vers l’[appel d’initialisation](/docs/react/reference/config#initialization) et transmettez plutôt au provider le `locale` et les `translations` déjà résolus (issus de [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot)).
</Callout>

## Fonctionnement [#how-it-works]

* **Traductions synchrones.** Le provider nécessite `translations` dès le départ pour que le contenu traduit s’affiche de manière synchrone, sans effet de chargement. Générez cet objet avec [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) après l’initialisation.
* **Contexte de l’arborescence.** Dans une configuration basée sur un provider, les composants situés sous le provider y récupèrent le paramètre régional actif, les traductions, les dictionnaires et la région.
* **Activation/désactivation de la traduction.** Lorsque `enableI18n` vaut `false`, le provider affiche le contenu du paramètre régional source et n’effectue pas la traduction, ce qui est utile pour prévisualiser l’application non traduite.

## Props [#props]

| Prop                            | Description                                                                                                  | Type        | Facultatif | Par défaut |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------- | ---------- | ---------- |
| [`locale`](#locale)             | Paramètre régional actif de l’arborescence.                                                                  | `string`    | Non        | —          |
| [`translations`](#translations) | Traductions du paramètre régional actif.                                                                     | `object`    | Non        | —          |
| [`dictionaries`](#dictionaries) | Dictionnaires par paramètre régional pour [`useTranslations`](/docs/react/reference/hooks/use-translations). | `object`    | Oui        | —          |
| [`region`](#region)             | Code de région actif.                                                                                        | `string`    | Oui        | —          |
| [`enableI18n`](#enable-i18n)    | Traduit le contenu. Lorsque `false`, affiche le contenu dans le paramètre régional source.                   | `boolean`   | Oui        | `true`     |
| [`children`](#children)         | L’arborescence de l’application.                                                                             | `ReactNode` | Oui        | —          |

### `locale` [#locale]

**Type** `string` · **Obligatoire**

Le paramètre régional actif de l’arborescence, sous la forme d’un code BCP 47 tel que `es`. Vous pouvez y accéder plus bas dans l’arborescence avec [`useLocale`](/docs/react/reference/hooks/use-locale).

### `translations` [#translations]

**Type** `object` · **Obligatoire**

Les traductions du paramètre régional actif, au format consommé de manière synchrone par le provider. Produisez-le avec [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) après l’initialisation.

### `dictionaries` [#dictionaries]

**Type** `object` · **Facultatif**

Dictionnaires par paramètre régional utilisés par [`useTranslations`](/docs/react/reference/hooks/use-translations) pour les recherches par id. N’indiquez pas cette propriété si vous utilisez uniquement `<T>` et `useGT`.

### `region` [#region]

**Type** `string` · **Facultatif**

Le code de région actif (par exemple, `US` ou `GB`), utilisé pour la mise en forme propre à la région ainsi que par les hooks et les sélecteurs de région.

### `enableI18n` [#enable-i18n]

**Type** `boolean` · **Facultatif** · **Par défaut** `true`

Détermine si le contenu doit être traduit. Lorsque `false`, le provider affiche le contenu dans le paramètre régional source et n’effectue pas la traduction.

### `children` [#children]

**Type** `ReactNode` · **Facultatif**

L’arborescence de votre application. Dans une configuration basée sur un provider, chaque composant qui traduit ou lit l’état du paramètre régional doit être un descendant du provider.

## Exemples [#examples]

```tsx title="src/routes/root.tsx"
import {
  GTProvider,
  initializeGT,
  getTranslationsSnapshot,
  parseLocale,
} from 'gt-react';
import gtConfig from '../../gt.config.json';

const loadTranslations = (locale: string) =>
  import(`../_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });

export async function loadRoot(request: Request) {
  const locale = parseLocale(request);
  return {
    locale,
    translations: await getTranslationsSnapshot(locale),
  };
}

export function Root({ locale, translations, children }) {
  return (
    <GTProvider locale={locale} translations={translations}>
      {children}
    </GTProvider>
  );
}
```

```tsx
// Prévisualiser l'application non traduite (paramètre régional source)
<GTProvider locale={locale} translations={translations} enableI18n={false}>
  <App />
</GTProvider>
```