<GTProvider>

Übersicht

Die <GTProvider>-Komponente stellt den General Translation (GT) Kontext für ihre Kindkomponenten bereit, sodass diese auf übersetzte Inhalte zugreifen können. Sie ist erforderlich für alle clientseitigen Übersetzungen in Ihrer Anwendung.

Wann verwenden

• Um Übersetzungen auf dem Client zu ermöglichen, umschließen Sie Ihre gesamte Anwendung mit <GTProvider>.
• Wenn Sie mit Wörterbüchern arbeiten, können Sie optional eine id angeben, um die an den Client gesendeten Wörterbuchdaten zu begrenzen und so die Leistung bei großen Wörterbüchern zu optimieren.
• Die <GTProvider>-Komponente wird sowohl für Inline-<T> als auch für Wörterbücher verwendet.

Referenz

Props

Beschreibung

Rückgabewert

React.JSX.Element|undefined, das die Kinder enthält, die an diese Komponente übergeben wurden.

Beispiele

Grundlegende Verwendung

Wickeln Sie Ihre Anwendung in <GTProvider>, um Übersetzungen zu Ihrer App hinzuzufügen. Vergessen Sie nicht, eine Liste der unterstützten Sprachen hinzuzufügen, um Übersetzungen zu aktivieren.

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>
);

Wörterbücher

Sie können dem <GTProvider>-Komponenten auch ein Wörterbuch übergeben und dann mit dem useDict() Hook darauf zugreifen.

import dictionary from "./dictionary.js";

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

Weitere Informationen zur Verwendung von Wörterbüchern finden Sie in diesem Leitfaden.

Konfiguration hinzufügen

Wenn Sie kein Fan davon sind, Props direkt an die <GTProvider>-Komponente zu übergeben, können Sie eine Konfigurationsdatei erstellen und diese an die Komponente übergeben. Sie integriert sich auch direkt mit dem gtx-cli translate Befehl, sodass Sie Dinge wie Sprachen nicht manuell als Parameter angeben müssen.

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

Alles, was Sie tun müssen, ist, dies an die <GTProvider>-Komponente zu übergeben.

import config from "../gt.config.json";

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

Benutzerdefinierter Übersetzungs-Loader

Sie können das loadTranslations-Prop verwenden, um Übersetzungen aus einer benutzerdefinierten Quelle zu laden. Das ist nützlich, wenn Sie Übersetzungen aus einer anderen Quelle laden müssen, wie z. B. einer eigenen API.

import loadTranslations from "./loadTranslations";

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

Render-Einstellungen

Die Render-Einstellungen steuern das Ladeverhalten für Übersetzungen. Es gibt zwei Felder: timeout und method.

• timeout ist die Anzahl der Millisekunden, die auf das Laden einer Übersetzung gewartet wird, bevor ein Fallback angezeigt wird (Standard: 8000ms).
• method ist die Methode, die zum Laden der Übersetzungen verwendet wird ("skeleton", "replace" oder "default").

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

Jede Render-Einstellung bestimmt ein anderes Ladeverhalten: "skeleton" gibt null zurück, bis die Übersetzungen geladen sind. "replace" gibt den Fallback-Inhalt zurück, bis die Übersetzungen geladen sind. "default" gibt null zurück, bis die Übersetzungen geladen sind, es sei denn, die Fallback-Sprache hat die gleiche Sprache wie die aktuelle Sprache (z. B. en-US und en-GB). In diesem Fall wird der Fallback-Inhalt sofort angezeigt, bis die Übersetzungen geladen sind.

Hinweise

• Der <GTProvider> muss alle <T>-Komponenten und andere übersetzungsbezogene Funktionen umschließen. Erfahre mehr hier.

Nächste Schritte

• Erfahre mehr über die <T> Komponente zum Übersetzen von Text und Komponenten.
• Sieh dir Übersetzungskomponenten und -funktionen an: <T>, useGT() oder useDict().