Vue d’ensemble

Le composant <GTProvider> fournit le contexte General Translation (GT) à ses children, ce qui leur permet d’accéder au contenu traduit. Il est nécessaire pour toutes les traductions côté client dans votre application.

Quand l'utiliser

• Enveloppez toute votre application dans <GTProvider> pour activer les traductions côté client.
• Lorsque vous travaillez avec des dictionaries, vous pouvez indiquer un id pour limiter les données du dictionary envoyées au client et ainsi optimiser les performances pour les dictionaries volumineux.
• Le composant <GTProvider> est utilisé à la fois pour les <T> en ligne et pour les dictionaries.

Références

Props

Description

Renvoie

React.JSX.Element|undefined contenant le contenu (children) transmis à ce composant.

Exemples

Utilisation de base

Encapsulez votre application dans <GTProvider> pour y activer la traduction. N’oubliez pas d’ajouter une liste des locales prises en charge pour permettre 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']}> // Activer l'espagnol et le français // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Dictionaries

Vous pouvez également passer un dictionary au composant <GTProvider>, puis y accéder avec le hook useTranslations.

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 dictionaries, consultez ce guide.

Ajout de configuration

Si vous n’êtes pas adepte du passage de props directement au composant <GTProvider>, vous pouvez créer un fichier de configuration et le fournir au composant. Il s’intègre aussi directement avec la commande gtx-cli translate, ce qui vous évite d’avoir à préciser manuellement des éléments comme les locales en paramètre.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // permet de revenir à des traductions antérieures (généré automatiquement par le CLI)
}

Il vous suffit de le transmettre au composant <GTProvider>.

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 des traductions depuis une source personnalisée. C’est utile lorsque vous devez charger des traductions depuis une autre source, 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. Deux champs sont disponibles : timeout et method.

• timeout correspond au nombre de millisecondes d’attente avant d’afficher un contenu de secours si la traduction ne s’est pas chargée (par défaut : 8000 ms).
• method indique la méthode utilisée pour charger les traductions ("skeleton", "replace" ou "default").

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

Chaque paramètre de rendu détermine un comportement de chargement différent : "skeleton" renvoie null jusqu’à ce que les traductions soient chargées. "replace" renvoie le contenu de secours jusqu’à ce que les traductions soient chargées. "default" renvoie null jusqu’à ce que les traductions soient chargées, sauf si la locale de secours est dans la même langue que la locale actuelle (p. 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.

Notes

• Le <GTProvider> doit envelopper tous les composants <T> ainsi que 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.