Einführung

Das General Translation React SDK ist eine Open-Source-Bibliothek für Internationalisierung (i18n) in React-Anwendungen.

Es stellt einen umfassenden Satz an Tools bereit, um Ihre React-Anwendung einfach und gut wartbar zu internationalisieren – mit Funktionsparität zu anderen beliebten i18n-Bibliotheken.

Das SDK kann eigenständig, ohne die General Translation-Plattform, verwendet werden und verhält sich ähnlich wie andere i18n-Bibliotheken.

Es integriert sich jedoch auch in unsere Plattform und bietet erweiterte Funktionen:

• Hot Reloading von Übersetzungen in der Entwicklung
• Automatische KI-Übersetzungen
• Synchronisierung von Übersetzungen mit der General Translation-Plattform
• Native Integration mit unserem Translation-CDN

Konzepte

Es gibt 5 zentrale Konzepte, die du beim SDK kennen solltest.

Die <GTProvider>-Komponente

Die <GTProvider>-Komponente stellt deiner Anwendung den Übersetzungs­kontext bereit, einschließlich der aktuellen Sprache und der zugehörigen Übersetzungen.

import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* Ihr Anwendungsinhalt */}
      </div>
    </GTProvider>
  );
}

Wichtig: Der Provider sollte Ihre gesamte Anwendung umschließen und so weit oben wie möglich im Komponentenbaum platziert werden, z. B. in Ihrer Root-App-Komponente.

Weitere Informationen finden Sie in der API-Referenz zu GTProvider.

Die <T>-Komponente

Die <T>-Komponente ist die empfohlene Methode, um Inhalte in Ihrer Anwendung zu übersetzen.

Sie ist eine React-Komponente, mit der sich beliebige JSX-Elemente umschließen lassen und die den Inhalt des Elements automatisch in einer unterstützten Sprache rendert.

Beispiele

<T>
  <div>Hallo, Welt!</div>
</T>

<T>
  <div>
    <h1> Hier ist ein Bild </h1>
    <img src="https://example.com/image.png" alt="Beispiel" />
  </div>
</T>

<T>
  Die Formatierung lässt sich einfach mit der `<T>`-Komponente durchführen.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>

Die <T>-Komponente funktioniert mit Variablenkomponenten wie <Num>, <DateTime> und <Currency> zur Formatierung dynamischer Inhalte zusammen.

Weitere Informationen finden Sie im Leitfaden zur [<T>]-Komponente, der die verschiedenen Verwendungsmöglichkeiten der <T>-Komponente erklärt.

Der useGT-Hook

Der useGT-Hook ist ein React-Hook, der ähnlich wie die <T>-Komponente verwendet werden kann – mit einigen Abwägungen.

Der Hook gibt eine Funktion zurück, mit der sich Zeichenketten übersetzen lassen.

const t = useGT();

t('Hallo, Welt!');

Im Vergleich zur Komponente <T> bietet der Hook useGT mehr Flexibilität in Ihrer Codebasis.

Wenn Sie beispielsweise eine komplexe Datenstruktur mit verschachtelten Strings haben, wäre die Verwendung der Komponente <T> schwieriger.

const t = useGT();
const data = {
  title: t('Hallo, Welt!'),
  description: t('Das ist eine Beschreibung'),
};

Weitere Informationen zum Hook useGT findest du im Leitfaden zu Strings.

Die Funktion msg

Die Funktion msg wird verwendet, um Zeichenketten zur Übersetzung zu markieren, die in mehreren Komponenten verwendet oder in Konfigurationsobjekten gespeichert werden.

Dies ist besonders nützlich für gemeinsam genutzte Inhalte wie Navigationslabels, Formularmeldungen oder beliebigen Text, der an mehreren Stellen in Ihrer Anwendung erscheint.

// Strings für Übersetzung markieren
import { msg } from 'gt-react';

const navItems = [
  { label: msg('Startseite'), href: '/' },
  { label: msg('Über uns'), href: '/about' },
  { label: msg('Kontakt'), href: '/contact' }
];

// Dekodiere und verwende die markierten Strings
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}

Die Funktion msg versieht Zeichenketten mit Übersetzungsmetadaten, useMessages wertet sie zur Laufzeit wieder aus.

Weitere Informationen zur Funktion msg finden Sie im Leitfaden zu Shared Strings.

Der Hook useTranslations

Der Hook useTranslations ist ein React-Hook, der eine Funktion zurückgibt, mit der Übersetzungen für einen bestimmten Schlüssel abgerufen werden können.

const dictionary = {
  hello: {
    world: 'Hallo, Welt!',
  },
};

const translate = useTranslations();
translate('hallo.welt');

Dieses Verhalten ähnelt dem anderer Übersetzungsbibliotheken wie react-i18next und next-intl.

Den Leitfaden dictionaries finden Sie hier, um mehr über den Hook useTranslations zu erfahren.

Weitere Informationen finden Sie in der useTranslations API Reference.

Nächste Schritte

• Erfahren Sie, wie Sie Ihr React-Projekt mit dem SDK einrichten: Schnellstart
• Erfahren Sie, wie Sie JSX-Inhalte mit der <T>-Komponente übersetzen: Leitfaden zur JSX-Übersetzung
• Erfahren Sie, wie Sie Strings mit dem useGT-Hook übersetzen: Leitfaden zur String-Übersetzung
• Erfahren Sie, wie Sie Shared Strings mit der Funktion msg verwenden: Leitfaden zu Shared Strings