Übersicht

Die <Currency>-Komponente gibt einen numerischen Wert als Währung aus. Die Zahl wird basierend auf der aktuellen Locale und allen optional übergebenen Parametern formatiert. Die Währungskomponente übernimmt ausschließlich die Formatierung und führt keine Wechselkursberechnungen durch.

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

Alle Umformatierungen werden lokal mit der Bibliothek Intl.NumberFormat vorgenommen.

Referenz

Props

Beschreibung

Rückgabewert

JSX.Element, das die formatierte Währung als String enthält.

Beispiele

Einfaches Beispiel

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

import { Currency } from 'gt-next';

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

Währung festlegen

Hier wird der Preis in Euro angezeigt.

import { Currency } from 'gt-next';

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

Übersetzen von <Currency>-Komponenten

Angenommen, du möchtest die Währung in einem Satz anzeigen, der ebenfalls übersetzt wird. Du kannst die <Currency>-Komponente in eine <T>-Komponente einbetten.

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

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

Benutzerdefinierte Formatierung

Hier zeigen wir den Preis in GBP an, legen die Anzahl der Dezimalstellen exakt fest und verwenden das schmale Währungssymbol (d. h. „$100“ statt „US$100“). Weitere Informationen zu den Intl.NumberFormatOptions für zusätzliche options.

import { Currency } from 'gt-next';

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

Hinweise

• Die <Currency>-Komponente formatiert Währungswerte anhand der aktuellen locale sowie optional übergebener Parameter.
• Die Komponente dient ausschließlich der Formatierung und nimmt keine Wechselkursberechnungen vor.
• Die Inhalte der <Currency>-Komponente werden nicht zur Übersetzung an die API gesendet. Sämtliche Umformatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Nächste Schritte

• Weitere Details und Anwendungsbeispiele zur Komponente <Currency> sowie zu anderen Variablenkomponenten wie <Num>, <DateTime> und <Var>,