<GTProvider>

Aperçu

Le composant <GTProvider> fournit un contexte de Traduction Générale (GT) à ses enfants, leur permettant d'accéder au contenu traduit. Il est requis pour toutes les traductions côté client dans votre application.

Quand l'utiliser

• Enveloppez votre application entière dans <GTProvider> pour activer les traductions côté client.
• Lorsque vous travaillez avec des dictionnaires, spécifiez éventuellement un id pour limiter les données de dictionnaire envoyées au client, optimisant ainsi les performances pour les dictionnaires volumineux.
• Le composant <GTProvider> est utilisé à la fois pour les balises <T> en ligne et les dictionnaires.

Référence

Props

Description

Retourne

React.JSX.Element|undefined contenant les enfants qui ont été passés à ce composant.

Exemples

Utilisation de base

Enveloppez votre application dans <GTProvider> pour ajouter la traduction à votre application. N'oubliez pas d'ajouter une liste des locales prises en charge pour activer la traduction.

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']}> // Enable Spanish and French // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Dictionnaires

Vous pouvez également passer un dictionnaire au composant <GTProvider> puis y accéder avec le hook useDict().

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

Pour plus d'informations sur l'utilisation des dictionnaires, consultez ce guide.

Ajout de la configuration

Si vous n'aimez pas passer les props directement au composant <GTProvider>, vous pouvez créer un fichier de configuration et le passer au composant. Il s'intègre également directement avec la commande gtx-cli translate, donc vous n'avez pas à spécifier manuellement des éléments comme les locales en tant que paramètre.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // allows for rolling back to previous translations (autogenerated by the CLI)
}

Tout ce que vous avez à faire, c'est de passer ce fichier au composant <GTProvider>.

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

Chargeur de traduction personnalisé

Vous pouvez utiliser la prop loadTranslations pour charger des traductions depuis une source personnalisée. C'est utile lorsque vous devez charger des traductions depuis une source différente, comme une API personnalisée.

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. Il y a deux champs : timeout et method.

• timeout est le nombre de millisecondes à attendre pour charger 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").

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

Chaque paramètre de rendu dicte un comportement de chargement différent : "skeleton" retournera null jusqu'à ce que les traductions soient chargées. "replace" retournera le contenu de secours jusqu'à ce que les traductions soient chargées. "default" retournera null jusqu'à ce que les traductions soient chargées, sauf si la locale de secours a la même langue que la locale actuelle (par exemple, en-US et en-GB). Dans ce cas, il retournera immédiatement le contenu de secours jusqu'à ce que les traductions soient chargées.

Notes

• Le <GTProvider> doit envelopper tous les composants <T> et autres fonctions liées à la traduction. En savoir plus ici.

Prochaines étapes

• En savoir plus sur le composant <T> pour traduire du texte et des composants.
• Découvrez les composants et fonctions de traduction : <T>, useGT(), ou useDict().