<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 toute traduction côté client sur votre application.

Quand l'utiliser

Enveloppez votre application entière dans <GTProvider> pour activer les traductions côté client.
Lors de l'utilisation de dictionnaires, spécifiez éventuellement 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 les <T> en ligne et les dictionnaires.

Référence

Props

Prop	Type	Default
`children?`	`ReactNode`	-
`projectId?`	`string`	-
`id??`	`string`	`undefined`
`dictionary??`	`Dictionary`	`defaultDictionary`
`locales??`	`string[]`	-
`defaultLocale??`	`string`	`libraryDefaultLocale`
`locale??`	`string`	-
`cacheUrl??`	`string`	`'https://cdn.gtx.dev'`
`runtimeUrl??`	`string`	`'https://runtime.gtx.dev'`
`renderSettings??`	`RenderSettings`	`defaultRenderSettings`
`_versionId??`	`string`	-
`devApiKey??`	`string`	-
`metadata??`	`object`	-

Description

Prop	Description
`children`	Tout composant ou les parents de tout composant qui doit traduire ou accéder aux informations de traduction côté client. Ceux-ci devraient inclure tous les composants utilisant `<T>`, `useGT`, ou d'autres utilitaires de traduction.
`projectId?`	L'ID du projet requis pour les services cloud de traduction générale.
`id?`	L'ID d'un dictionnaire imbriqué pour limiter les données envoyées au client. Ceci est utile pour les grands projets avec des dictionnaires étendus.
`dictionary?`	Le dictionnaire de traduction pour le projet.
`locales?`	La liste des locales approuvées pour le projet.
`defaultLocale?`	La locale par défaut à utiliser si aucune autre locale n'est trouvée.
`locale?`	La locale actuelle, si elle est déjà définie.
`cacheUrl?`	L'URL du service de cache pour récupérer les traductions.
`runtimeUrl?`	L'URL du service d'exécution pour récupérer les traductions.
`renderSettings?`	Les paramètres pour le rendu des traductions.
`_versionId?`	L'ID de version pour récupérer les traductions.
`devApiKey?`	La clé API pour les environnements de développement.
`metadata?`	Métadonnées supplémentaires à passer au contexte.

Renvoie

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 de locales prises en charge pour activer la traduction.

index.js

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 dictionnaire au composant <GTProvider> et ensuite y accéder avec le hook useDict().

index.js

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 configuration

Si vous n'êtes pas fan de passer des 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, vous n'avez donc pas à spécifier des éléments comme les locales manuellement en tant que paramètre.

gt.config.json

{
  "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)
}

Tout ce que vous avez à faire est de passer cela au composant <GTProvider>.

index.js

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 à partir d'une source personnalisée. C'est utile lorsque vous devez charger des traductions à partir d'une source différente, comme une API personnalisée.

index.js

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

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 le texte et les composants.
Consultez les composants et fonctions de traduction : <T>, useGT(), ou useDict().

<GTProvider>

Sur cette page