Übersicht

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

Wann verwenden

• Wickle deine gesamte Anwendung in <GTProvider>, um Übersetzungen im Client zu aktivieren.
• Bei der Arbeit mit Wörterbüchern kannst du optional eine id angeben, um die an den Client gesendeten Wörterbuchdaten zu begrenzen und so die Performance bei großen Wörterbüchern zu optimieren.
• Die Komponente <GTProvider> wird sowohl für inline <T> als auch für Wörterbücher verwendet.

Referenzen

Props

Beschreibung

Rückgabewert

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

Beispiele

Grundlegende Verwendung

Umschließen Sie Ihre Anwendung mit <GTProvider>, um Übersetzungen 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>
);

Wörterbücher

Sie können dem <GTProvider>-Component auch ein Wörterbuch übergeben und anschließend über den useTranslations-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 dictionaries finden Sie in diesem Guide.

Konfiguration hinzufügen

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

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

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 Translations-Loader

Sie können die loadTranslations-Prop verwenden, um Übersetzungen aus einer benutzerdefinierten Quelle zu laden. Das ist hilfreich, wenn Sie Übersetzungen aus einer anderen Quelle laden möchten, z. B. 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 von Übersetzungen. Es gibt zwei Felder: timeout und method.

• timeout ist die Anzahl der Millisekunden, die auf das Laden einer Übersetzung gewartet wird, bevor ein Standardwert angezeigt 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" gibt null zurück, bis die Übersetzungen geladen sind. "replace" gibt den Standardwert-Inhalt zurück, bis die Übersetzungen geladen sind. "default" gibt null zurück, bis die Übersetzungen geladen sind, es sei denn, die Fallback-Locale hat dieselbe Sprache wie die aktuelle Locale (z. B. en-US und en-GB). In diesem Fall wird der Standardwert-Inhalt sofort zurückgegeben, 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.