Übersicht

Die Komponente <GTProvider> stellt den General Translation (GT)-Kontext für ihre children bereit und ermöglicht so den Zugriff auf übersetzte Inhalte. Sie ist für alle clientseitigen Übersetzungen in Ihrer Anwendung erforderlich.

Wann verwenden

• Umschließen Sie Ihre gesamte Anwendung mit <GTProvider>, um Übersetzungen auf dem Client zu aktivieren.
• Beim Arbeiten mit dictionaries können Sie optional eine id angeben, um die an den Client gesendeten Wörterbuchdaten zu begrenzen und so die Performance bei großen dictionaries zu optimieren.
• Die <GTProvider>-Komponente wird sowohl für Inline-<T> als auch für dictionaries verwendet.

Referenzen

Props

Beschreibung

Rückgabewert

React.JSX.Element|undefined, das die an diese Komponente übergebenen children enthält.

Beispiele

Grundlegende Verwendung

Umhüllen Sie Ihre Anwendung mit <GTProvider>, um Übersetzungen in Ihrer App zu aktivieren. Vergessen Sie nicht, eine Liste der unterstützten locales hinzuzufügen, um die Übersetzung zu ermöglichen.

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']}> // Spanisch und Französisch aktivieren // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Dictionaries

Sie können auch ein Wörterbuch an die Komponente <GTProvider> übergeben und anschließend mit dem Hook useTranslations 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 dictionaries finden Sie in diesem Guide.

Konfiguration hinzufügen

Wenn du keine Props direkt an die <GTProvider>-Komponente übergeben möchtest, kannst du eine Konfigurationsdatei erstellen und diese der Komponente übergeben. Sie integriert sich außerdem direkt mit dem gtx-cli translate-Befehl, sodass du Dinge wie locales nicht manuell als Parameter angeben musst.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // ermöglicht das Zurücksetzen auf frühere Übersetzungen (automatisch von der CLI generiert)
}

Sie müssen es nur an die Komponente <GTProvider> übergeben.

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

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

Benutzerdefinierter Übersetzungslader

Sie können die Eigenschaft loadTranslations verwenden, um Übersetzungen aus einer benutzerdefinierten Quelle zu laden. Das ist hilfreich, wenn Sie Übersetzungen aus einer anderen Quelle laden müssen, zum Beispiel aus 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 Zeit in Millisekunden, die gewartet wird, bevor ein Standardwert angezeigt wird, falls eine Übersetzung nicht rechtzeitig geladen wird (Standard: 8000 ms).
• method ist die Methode, mit der Übersetzungen geladen werden ("skeleton", "replace" oder "default").

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

Jede Render-Einstellung bewirkt ein anderes Ladeverhalten: "skeleton" liefert null, bis die Übersetzungen geladen sind. "replace" zeigt den Standardwert an, bis die Übersetzungen geladen sind. "default" liefert null, bis die Übersetzungen geladen sind, es sei denn, die Fallback‑locale hat dieselbe Sprache wie die aktuelle locale (d. h. en-US und en-GB). In diesem Fall wird der Standardwert sofort angezeigt, bis die Übersetzungen geladen sind.

Hinweise

• Der <GTProvider> muss alle <T>-Komponenten und andere übersetzungsbezogene Funktionen umschließen. Weitere Informationen finden Sie hier.

Nächste Schritte

• Erfahren Sie mehr über die <T>-Komponente zum Übersetzen von Text und Komponenten.