Übersicht

Die <Currency>-Komponente gibt einen numerischen Wert als Währung aus. Die Zahl wird anhand des aktuellen locale sowie optional übergebener Parameter formatiert. Die Währungskomponente übernimmt ausschließlich die Formatierung und führt keine Wechselkursberechnungen durch.

<Currency>{100}</Currency>
// Ausgabe: 100,00 $

Alle Formatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Referenzen

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-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 die Währung in einem Satz anzeigen, der ebenfalls übersetzt wird. Sie können 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 zeigen wir einen Preis in GBP, der die Dezimalstellen exakt festlegt und das schmale Währungssymbol verwendet (d. h. „$100“ statt „US$100“). Erfahren Sie mehr über die Intl.NumberFormatOptions für weitere options.

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 Währungsbeträge basierend auf der aktuellen locale sowie optional übergebenen Parametern zu formatieren.
• Die Komponente übernimmt ausschließlich die Formatierung und führt keine Wechselkursberechnungen durch.
• Die Inhalte der <Currency>-Komponente werden nicht an die API zur Übersetzung gesendet. Alle Formatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Nächste Schritte

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