Überblick

Die Funktion useGT ist ein Hook zum Übersetzen von Strings zur Build-Zeit.

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 wird aller Inhalt innerhalb einer t-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet schnelle Ladezeiten für alle Locales, kann jedoch nur Inhalte übersetzen, die zur Build‑Zeit bekannt sind.

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

Befolgen Sie dazu die 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. Denk daran, deiner Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei der bedarfsgesteuerten Übersetzung in der Entwicklung kann es zu Verzögerungen kommen. Das tritt bei Produktions-Builds nicht auf.

Beispiel

Grundlagen

Mit useGT können Sie Strings ü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.

Variablen verwenden

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-Nachrichtenformats

gt-react unterstützt das ICU‑Nachrichtenformat, mit dem Sie auch Variablen formatieren können.

import { useGT } from 'gt-react';

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

Hinweise

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

Nächste Schritte

• Siehe useTranslations, um Strings mithilfe eines Wörterbuchs zu übersetzen.