GitHub

Überblick

Die <Currency>-Komponente gibt einen numerischen Wert als Währungsbetrag aus. Die Zahl wird anhand der aktuellen locale und 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 Umformatierungen erfolgen lokal mithilfe der Bibliothek Intl.NumberFormat.

Referenz

Props

Prop

Type

Beschreibung

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. In der Regel eine Zahl, die den als Währung zu formatierenden Wert darstellt. Wenn vorhanden, hat sie Vorrang vor der Prop `value`.
`name`	Optionaler Name für das Währungsfeld, verwendet für Metadaten.
`value`	Der Standardwert für die Währung. Verwendet `children` als Standardwert, wenn nicht angegeben. Kann eine Zeichenfolge oder eine Zahl sein. Zeichenfolgen werden vor dem Formatieren in Zahlen geparst.
`currency`	Der Währungscode, z. B. "USD" oder "EUR". Bestimmt das verwendete Symbol und die Formatierung.
`options`	Optionale Formatierungsoptionen für die Währung gemäß der `Intl.NumberFormatOptions`-Spezifikation. Verwenden Sie diese, um Einstellungen wie maximale Nachkommastellen, Gruppierung usw. festzulegen.
`locales`	Optionale `locales`, um die Formatierungs-`locale` festzulegen. Wenn nicht angegeben, wird die Standard-`locale` des Nutzers verwendet. Weitere Informationen zur Angabe von `locales` finden Sie hier.

Rückgabewert

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

Beispiele

Einfaches Beispiel

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

PriceDisplay.jsx

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.

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

Übersetzen von `<Currency>`-Komponenten

Wenn Sie möchten, dass die Währung in einem ebenfalls übersetzten Satz angezeigt wird, können Sie die <Currency>-Komponente in eine <T>-Komponente einschließen.

PriceDisplay.jsx

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

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

Benutzerdefiniertes Format

Hier zeigen wir einen Preis in GBP, bei dem die Anzahl der Dezimalstellen exakt festgelegt ist und das schmale Währungssymbol verwendet wird (d. h. „$100“ statt „US$100“). Weitere Informationen zu den Intl.NumberFormatOptions finden Sie hier.

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

Nächste Schritte

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

Überblick

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

Alle Umformatierungen erfolgen lokal mithilfe der Bibliothek Intl.NumberFormat.

Referenz

Props

Prop

Type

Beschreibung

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. In der Regel eine Zahl, die den als Währung zu formatierenden Wert darstellt. Wenn vorhanden, hat sie Vorrang vor der Prop `value`.
`name`	Optionaler Name für das Währungsfeld, verwendet für Metadaten.
`value`	Der Standardwert für die Währung. Verwendet `children` als Standardwert, wenn nicht angegeben. Kann eine Zeichenfolge oder eine Zahl sein. Zeichenfolgen werden vor dem Formatieren in Zahlen geparst.
`currency`	Der Währungscode, z. B. "USD" oder "EUR". Bestimmt das verwendete Symbol und die Formatierung.
`options`	Optionale Formatierungsoptionen für die Währung gemäß der `Intl.NumberFormatOptions`-Spezifikation. Verwenden Sie diese, um Einstellungen wie maximale Nachkommastellen, Gruppierung usw. festzulegen.
`locales`	Optionale `locales`, um die Formatierungs-`locale` festzulegen. Wenn nicht angegeben, wird die Standard-`locale` des Nutzers verwendet. Weitere Informationen zur Angabe von `locales` finden Sie hier.

Rückgabewert

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

Beispiele

Einfaches Beispiel

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

PriceDisplay.jsx

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.

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

Übersetzen von `<Currency>`-Komponenten

Wenn Sie möchten, dass die Währung in einem ebenfalls übersetzten Satz angezeigt wird, können Sie die <Currency>-Komponente in eine <T>-Komponente einschließen.

PriceDisplay.jsx

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

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

Benutzerdefiniertes Format

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

Nächste Schritte

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

Überblick

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

Alle Umformatierungen erfolgen lokal mithilfe der Bibliothek Intl.NumberFormat.

Prop	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. In der Regel eine Zahl, die den als Währung zu formatierenden Wert darstellt. Wenn vorhanden, hat sie Vorrang vor der Prop `value`.
`name`	Optionaler Name für das Währungsfeld, verwendet für Metadaten.
`value`	Der Standardwert für die Währung. Verwendet `children` als Standardwert, wenn nicht angegeben. Kann eine Zeichenfolge oder eine Zahl sein. Zeichenfolgen werden vor dem Formatieren in Zahlen geparst.
`currency`	Der Währungscode, z. B. "USD" oder "EUR". Bestimmt das verwendete Symbol und die Formatierung.
`options`	Optionale Formatierungsoptionen für die Währung gemäß der `Intl.NumberFormatOptions`-Spezifikation. Verwenden Sie diese, um Einstellungen wie maximale Nachkommastellen, Gruppierung usw. festzulegen.
`locales`	Optionale `locales`, um die Formatierungs-`locale` festzulegen. Wenn nicht angegeben, wird die Standard-`locale` des Nutzers verwendet. Weitere Informationen zur Angabe von `locales` finden Sie hier.

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.

PriceDisplay.jsx

import { Currency } from 'gt-next';

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

Übersetzen von `<Currency>`-Komponenten

Wenn Sie möchten, dass die Währung in einem ebenfalls übersetzten Satz angezeigt wird, können Sie die <Currency>-Komponente in eine <T>-Komponente einschließen.

PriceDisplay.jsx

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

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

Benutzerdefiniertes Format

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

Nächste Schritte

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

<Currency>

Auf dieser Seite

<Currency>

Auf dieser Seite

<Currency>

Auf dieser Seite

GitHubStern auf GitHub vergeben

GitHubStern auf GitHub vergeben

Stern auf GitHub vergeben

Stern auf GitHub vergeben