Übersicht

Die Funktion useMessages ist ein Hook zum Übersetzen von encoded strings aus msg zur Build‑Zeit.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

Referenz

Parameter

Keine

Rückgabewert

Eine Callback-Funktion m, die den übergebenen codierten Inhalt aus msg übersetzt.

(encodedContent: string, options?: Record<string, any>) => string

Verhalten

Produktion

Während des CD-Prozesses wird sämtlicher Inhalt innerhalb einer msg-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. 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.

Bitte folgen Sie der Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion m Inhalte bei Bedarf. Das ist hilfreich, um zu prototypisieren, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, Ihrer Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei bedarfsorientierter Übersetzung in der Entwicklung kann es zu einer Verzögerung kommen. Dies tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden ausdrücklich bei Bedarf übersetzt, d. h. mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können useMessages verwenden, um encoded strings aus msg zu übersetzen.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hallo Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

Verwendung von Variablen

Sie können Variablen an kodierte Strings übergeben.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hallo, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* Dies gibt „Hallo, Bob!" aus */}
    </p>
  );
}

msg-Variablen überschreiben m-Variablen

Wenn du Variablen sowohl an msg als auch an m übergibst, überschreiben die an msg übergebenen Variablen die an m übergebenen.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hallo, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Hinweis: Es wird "Hello, Alice!" angezeigt – die Variable wird beim Rendern nicht überschrieben.

Verwendung des ICU‑Nachrichtenformats

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

import { msg, useMessages } from 'gt-react';

const encodedMessage = msg('Im Warenkorb {count, plural, =0 {befinden sich keine Artikel} =1 {befindet sich ein Artikel} other {befinden sich {count} Artikel}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Hinweise

• Die Funktion useMessages ist ein Hook, der encodierte Strings aus msg übersetzt.
• Übersetzungen von Strings mit useMessages erfolgen nicht zur Laufzeit, sondern bereits während des Build‑Prozesses (außer in der Entwicklung).

Nächste Schritte

• Siehe getMessages für asynchrone Übersetzungen aus encoded strings zur Buildzeit.
• Siehe msg zum Encodieren von Strings für die Übersetzung.
• Für Übersetzungen zur Laufzeit siehe tx und <Tx>.