<Currency>

Übersicht

Die <Currency>-Komponente rendert einen numerischen Wert als Währung. Die Zahl wird basierend auf der aktuellen Locale und allen optionalen übergebenen Parametern formatiert. Die Currency-Komponente behandelt nur die Formatierung und führt keine Wechselkursberechnungen durch.

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

Alle Neuformatierungen werden lokal mit der Intl.NumberFormat-Bibliothek behandelt.

Referenz

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`currency??`	`string`	`"USD"`
`value??`	`string \| number`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Beschreibung

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. Typischerweise eine Zahl, die als Währungswert formatiert werden soll. Falls angegeben, hat dieser Wert Vorrang vor der `value`-Prop.
`name`	Optionaler Name für das Währungsfeld, wird für Metadaten verwendet.
`value`	Der Standardwert für die Währung. Fällt auf `children` zurück, wenn nicht angegeben. Kann ein String oder eine Zahl sein. Strings werden vor der Formatierung in Zahlen umgewandelt.
`currency`	Der Währungstyp, wie zum Beispiel "USD" oder "EUR". Dies bestimmt das Symbol und die Formatierung der Währung.
`options`	Optionale Formatierungsoptionen für die Währung, entsprechend der `Intl.NumberFormatOptions` Spezifikation. Verwenden Sie dies, um Stile wie maximale Nachkommastellen, Gruppierung usw. zu definieren.
`locales`	Optionale Locales, um das Formatierungsgebietsschema festzulegen. Wenn nicht angegeben, wird das Standardgebietsschema des Benutzers verwendet. Mehr über die Angabe von Locales erfahren Sie hier.

Rückgabewert

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

Beispiele

Einfaches Beispiel

Die <Currency>-Komponente kann verwendet werden, um lokalisierte Währungswerte anzuzeigen.

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

Währung angeben

Hier zeigen wir den Preis in Euro an.

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

Übersetzen von `<Currency>`-Komponenten

Angenommen, Sie möchten, dass die Währung in einem Satz angezeigt wird, der ebenfalls übersetzt wird. Sie können die <Currency>-Komponente in eine <T>-Komponente einbetten.

PriceDisplay.jsx

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

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

Benutzerdefiniertes Formatieren

Hier zeigen wir den Preis in GBP an, wobei genau die Dezimalstellen angegeben werden und das schmale Symbol für die Währung verwendet wird (d. h. "$100" statt "US$100"). Lesen Sie mehr über die Intl.NumberFormatOptions für weitere Optionen.

PriceDisplay.jsx

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 wird verwendet, um Währungswerte basierend auf der aktuellen Spracheinstellung und optional übergebenen Parametern zu formatieren.
Die Currency-Komponente übernimmt ausschließlich die Formatierung und führt keine Umrechnungen von Wechselkursen durch.
Die Inhalte der <Currency>-Komponente werden nicht an die API zur Übersetzung gesendet. Die gesamte Umformatierung erfolgt lokal mit der Intl.NumberFormat-Bibliothek.

Nächste Schritte

Weitere Details und Anwendungsbeispiele für die <Currency>-Komponente sowie andere Variablenkomponenten wie <Num>, <DateTime> und <Var> findest du in der Dokumentation zur Verwendung von Variablenkomponenten.

<Currency>

Auf dieser Seite