<GTProvider>

Aperçu

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

Quand l'utiliser

• Enveloppez l'ensemble de votre application dans <GTProvider> pour activer les traductions côté client.
• Lorsque vous travaillez avec des dictionnaires, vous pouvez spécifier un id pour limiter les données du dictionnaire envoyées au client, optimisant ainsi les performances pour les grands dictionnaires.
• Le composant <GTProvider> est utilisé à la fois pour l'intégration directe avec <T> et pour 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 des éléments comme les locales manuellement 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 est de passer ceci 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 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").

<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 les 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().