Vue d’ensemble

Le composant <GTProvider> fournit le contexte General Translation (GT) à ses children, leur permettant d’accéder au contenu traduit. Il est requis pour toute traduction 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 dictionary, vous pouvez éventuellement spécifier un id afin de limiter les données du dictionary envoyées au client, ce qui optimise les performances pour les dictionary volumineux.
• Le composant <GTProvider> est utilisé à la fois pour le <T> inline et pour les dictionary.

Références

Props

Description

Renvoie

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

Exemples

Utilisation de base

Enveloppez votre application avec <GTProvider> pour y activer la traduction. 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']}> // Activer l'espagnol et le français // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Dictionnaires

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’aimez pas passer des props directement au composant <GTProvider>, vous pouvez créer un fichier de configuration et le lui fournir. 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 aux traductions précédentes (généré automatiquement par la 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. Il y a deux champs : timeout et method.

• timeout est le nombre de millisecondes à attendre pour qu’une traduction se charge avant d’afficher un secours (par défaut : 8000 ms).
• 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 entraîne 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 le locale de secours utilise la même langue que le locale actuel (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.

Remarques

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

Prochaines étapes

• Pour en savoir plus, consultez le composant <T> utilisé pour traduire du texte et des composants.