<Currency>

Übersicht

Die <Currency>-Komponente stellt einen Zahlenwert als Währung dar. Die Zahl wird basierend auf der aktuellen Spracheinstellung und allen optional übergebenen Parametern formatiert. Die Currency-Komponente übernimmt ausschließlich die Formatierung und führt keine Umrechnungen von Wechselkursen durch.

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

Die gesamte Umformatierung erfolgt lokal mithilfe der Intl.NumberFormat-Bibliothek.

Referenz

Eigenschaften

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`-Eigenschaft.
`name`	Optionaler Name für das Währungsfeld, wird für Metadatenzwecke verwendet.
`value`	Der Standardwert für die Währung. Fällt auf children zurück, wenn kein Wert angegeben ist. 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 gemäß 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-react'; 

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-react';

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-react';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <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-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ä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.
Der Inhalt der <Currency> Komponente wird 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