# react-native: GTProvider
URL: https://generaltranslation.com/fr/docs/react-native/api/components/gtprovider.mdx
---
title: GTProvider
description: Référence de l’API pour le composant GTProvider
---

## Vue d’ensemble

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

### Quand l’utiliser

* Enveloppez l’intégralité de votre application dans `<GTProvider>` pour activer les traductions côté client.
* Le composant `<GTProvider>` est utilisé à la fois pour [le composant inline `<T>`](/docs/react-native/guides/t) et pour les [dictionnaires](/docs/react-native/guides/dictionaries).

## Référence

### Props

<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,
},
}}
/>

### Description

| Prop                | Description                                                                                                                                                                                                             |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`          | Tout composant, ou tout composant parent, qui doit traduire ou accéder à des informations de traduction côté client. Cela inclut les composants qui utilisent `<T>`, `useGT` ou d’autres utilitaires de traduction.     |
| `projectId?`        | L’ID du projet requis pour les services cloud de General Translation.                                                                                                                                                   |
| `dictionary?`       | Le dictionnaire de traduction du projet.                                                                                                                                                                                |
| `locales?`          | La liste des paramètres régionaux autorisés pour le projet.                                                                                                                                                             |
| `defaultLocale?`    | Le paramètre régional par défaut à utiliser si aucun autre paramètre régional n’est disponible.                                                                                                                         |
| `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 Runtime pour récupérer les traductions.                                                                                                                                                                |
| `renderSettings?`   | Les paramètres de rendu des traductions.                                                                                                                                                                                |
| `_versionId?`       | L’ID 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 au passage de ces valeurs comme props individuelles. |
| `loadTranslations?` | Une fonction asynchrone qui prend une chaîne de paramètre régional et renvoie l’objet de traductions pour ce paramètre régional. Utilisée pour charger des fichiers de traduction pré-générés au Runtime.               |
| `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 ex., `US`, `GB`). Utilisé pour le formatage spécifique à la 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 de JSX traduit.                                                                                                      |

### Valeur de retour

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

## Exemples

### Utilisation de base

Encapsulez 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="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Le contenu de votre application */}
    </GTProvider>
  );
}
```

### Dictionnaires

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

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';
import dictionary from './dictionary';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations} dictionary={dictionary}> {/* // [!code highlight] */}
      {/* Le contenu de votre application */}
    </GTProvider>
  );
}
```

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

### Ajout d’une configuration

Si vous préférez ne pas passer de props directement au composant `<GTProvider>`, vous pouvez créer un fichier de configuration et le lui transmettre.
Il s’intègre aussi directement à la [commande `gt translate`](/docs/cli/translate), ce qui vous évite d’avoir à spécifier manuellement des é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 le passer au composant `<GTProvider>`.

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import config from './gt.config.json';

export default function App() {
  return (
    <GTProvider {...config}> {/* // [!code highlight] */}
      {/* Le contenu de votre application */}
    </GTProvider>
  );
}
```

### Chargeur de traduction personnalisé

Vous pouvez utiliser la prop `loadTranslations` pour charger les traductions depuis une source personnalisée.
Cela est utile si vous devez charger les traductions depuis une autre source, par exemple une API personnalisée.

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Le contenu de votre application */}
    </GTProvider>
  );
}
```

### Paramètres de rendu

Les paramètres de rendu contrôlent le comportement de chargement des traductions.
Il y a deux champs : `timeout` et `method`.

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

```jsx title="App.tsx" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  {/* Le contenu de votre application */}
</GTProvider>
```

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

***

## Remarques

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

## Prochaines étapes

* Découvrez le [composant `<T>`](/docs/react-native/guides/t) pour traduire du texte et des composants.