Panoramica

Il componente <Currency> visualizza un valore numerico come valuta. Il numero viene formattato in base alle impostazioni locali correnti e a eventuali parametri opzionali forniti. Il componente currency si occupa esclusivamente della formattazione e non esegue alcun calcolo dei tassi di cambio.

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

Tutta la formattazione è gestita localmente tramite la libreria Intl.NumberFormat.

Riferimenti

Props

Descrizione

Restituisce

JSX.Element che contiene la valuta formattata come stringa.

Esempi

Esempio base

Il componente <Currency> può essere usato per visualizzare valori di valuta localizzati.

import { Currency } from 'gt-next';

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

Specificare la valuta

Qui mostriamo il prezzo in euro.

import { Currency } from 'gt-next';

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

Tradurre i componenti <Currency>

Poniamo che tu voglia mostrare la valuta all'interno di una frase che viene anch’essa tradotta. Puoi avvolgere il componente <Currency> in un componente <T>.

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      Il prezzo è <Currency> {item.price} </Currency>.
    </T> 
  );
}

Formattazione personalizzata

Qui visualizziamo un prezzo in GBP che definisce con precisione il numero di cifre decimali e utilizza il simbolo “narrow” della valuta (cioè “$100” invece di “US$100”). Approfondisci le opzioni disponibili in Intl.NumberFormatOptions.

import { Currency } from 'gt-next';

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

Note

• Il componente <Currency> formatta i valori in valuta in base alla lingua/locale corrente e a eventuali parametri opzionali forniti.
• Il componente gestisce solo la formattazione e non esegue alcun calcolo dei tassi di cambio.
• I contenuti del componente <Currency> non vengono inviati all'API per la traduzione. Tutta la riformattazione viene eseguita localmente usando la libreria Intl.NumberFormat.

Prossimi passaggi

• Per ulteriori dettagli ed esempi d’uso del componente <Currency> e di altri componenti di variabile come <Num>, <DateTime> e <Var>,