Überblick

Die Funktion useGT ist ein Hook, mit dem Zeichenketten zur Build-Zeit übersetzt werden.

const t = useGT();

<p>{  t('Dieser Text wird übersetzt')  }</p>;

Referenzen

Parameter

Keine

Rückgabewert

Eine Callback-Funktion t, die den übergebenen Inhalt übersetzt.

(content: string, options?: InlineTranslationOptions) => string

Verhalten

Produktion

Während des CD-Prozesses (Continuous Delivery/Deployment) wird sämtlicher Inhalt innerhalb einer t-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies sorgt für kurze Ladezeiten für alle locales, kann jedoch nur Inhalte übersetzen, die zur Build‑Zeit bekannt sind.

Sobald sie erzeugt wurden, werden Übersetzungen je nach Konfiguration entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build‑Output Ihrer App abgelegt. Von dort aus wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Folgen Sie der Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion t Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, wie deine App in verschiedenen Sprachen aussehen wird. Denke daran, deiner Umgebung einen Dev‑API‑Schlüssel hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei der bedarfsgesteuerten Übersetzung während der Entwicklung kann es zu einer Verzögerung kommen. Dies tritt bei Produktionsbuilds nicht auf.

Beispiel

Grundlegende Verwendung

Sie können useGT verwenden, um Strings zu übersetzen.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hallo, Alice!')}
    </p>
  );
}

Hinweis: "Alice" wird in die bevorzugte Sprache des Benutzers übersetzt.

Verwendung von Variablen

Sie können Variablen an Wörterbuch-Übersetzungen übergeben.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hallo, {name}!', { name: 'Alice' })}
    </p>
  );
}

Hinweis: „Alice“ wird nicht in die bevorzugte Sprache des Nutzers übersetzt, da es sich um eine Variable handelt.

Verwendung des ICU message format

gt-react unterstützt das ICU message format, mit dem Sie auch Ihre variables formatieren können.

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Es {count, plural, =0 {sind keine Artikel} =1 {ist ein Artikel} other {sind {count} Artikel}} im Warenkorb', { count: 10 })}
    </p>
  );
}

Hinweise

• Die Funktion useGT ist ein Hook zum Übersetzen von Zeichenketten.
• Der useGT-Hook kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider>-Komponente umschlossen ist.
• Übersetzungen mit useGT erfolgen nicht zur Laufzeit, sondern bereits während des Build-Prozesses (außer im Entwicklungsmodus).

Nächste Schritte

• Siehe useTranslations, um Zeichenketten mit einem Wörterbuch zu übersetzen.