Übersicht

Die Komponente <Currency> gibt einen Zahlenwert als Währungsbetrag aus. Die Zahl wird entsprechend der aktuellen locale und optionalen übergebenen Parametern formatiert. Die Währungskomponente ist ausschließlich für die Formatierung zuständig und führt keine Wechselkursberechnungen durch.

<Currency>{100}</Currency>
// Ausgabe: $100.00

Alle Umformatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Referenz

Props

Beschreibung

Rückgabewert

JSX.Element, der die formatierte Währung als Zeichenfolge enthält.

Beispiele

Einfaches Beispiel

Die Komponente <Currency> kann verwendet werden, um lokalisierte Währungsbeträge anzuzeigen.

import { Currency } from 'gt-react'; 

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> 
    );
}

Währung festlegen

Hier wird der Preis in Euro angezeigt.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Übersetzen von <Currency>-Komponenten

Angenommen, Sie möchten eine Währung innerhalb eines Satzes anzeigen, der ebenfalls übersetzt wird. Dazu können Sie die <Currency>-Komponente in eine <T>-Komponente einschließen.

import { T, Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      Der Preis beträgt <Currency> {item.price} </Currency>.
    </T> 
  );
}

Benutzerdefinierte Formatierung

Hier geben wir einen Preis in GBP aus, der die Anzahl der Dezimalstellen exakt festlegt und das schmale Währungssymbol verwendet (also „$100“ statt „US$100“). Weitere Informationen zu den Intl.NumberFormatOptions finden Sie in der Dokumentation.

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

Hinweise

• Die <Currency>-Komponente wird verwendet, um Geldbeträge basierend auf der aktuellen locale und optional übergebenen Parametern zu formatieren.
• Die <Currency>-Komponente übernimmt ausschließlich die Formatierung und führt keine Wechselkursberechnungen durch.
• Die Inhalte der <Currency>-Komponente werden nicht zur Übersetzung an die API gesendet. Sämtliche Formatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Nächste Schritte

• Weitere Details und Beispiele zur Verwendung der <Currency>-Komponente sowie anderer Komponenten für Variablen wie <Num>, <DateTime> und <Var>,