<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

Umhüllen Sie Ihre Anwendung mit <GTProvider>, um Übersetzungen zu Ihrer App hinzuzufügen. Vergessen Sie nicht, eine Liste der unterstützten Locales 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 auch ein Wörterbuch an die <GTProvider>-Komponente übergeben und dann mit dem 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>
);

Für weitere Informationen zur Verwendung von Wörterbüchern schauen Sie sich diesen Leitfaden an.

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 Locales 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 Übersetzungslader

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

import loadTranslations from "./loadTranslations";

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

Render-Einstellungen

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 zum Laden von Übersetzungen ("skeleton", "replace" oder "default").

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

Jede Render-Einstellung bestimmt unterschiedliches 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, das Fallback-Locale hat dieselbe Sprache wie das aktuelle Locale (z.B. en-US und en-GB). In diesem Fall wird der Fallback-Inhalt sofort zurückgegeben, bis die Übersetzungen geladen sind.

Hinweise

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

Nächste Schritte

• Erfahren Sie mehr über die <T> Komponente zum Übersetzen von Text und Komponenten.
• Schauen Sie sich Übersetzungskomponenten und -funktionen an: <T>, useGT(), oder useTranslations().