Panoramica

Il componente <Currency> visualizza un valore numerico come valuta. Il numero viene formattato in base alla lingua/area locale corrente e a eventuali parametri facoltativi. Il componente <Currency> gestisce solo la formattazione e non esegue alcun calcolo dei tassi di cambio.

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

Tutto il riformattamento viene gestito localmente utilizzando la libreria Intl.NumberFormat.

Riferimenti

Props

Descrizione

Restituisce

JSX.Element che contiene la valuta formattata come stringa.

Esempi

Esempio di base

Il componente <Currency> può essere utilizzato per visualizzare importi in valuta localizzati.

import { Currency } from 'gt-react'; 

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

Specificare la valuta

Qui mostriamo il prezzo in euro.

import { Currency } from 'gt-react';

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

Tradurre i componenti <Currency>

Supponiamo che tu voglia mostrare la valuta all'interno di una frase che viene tradotta. Puoi racchiudere il componente <Currency> in un componente <T>.

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

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

Formattazione personalizzata

Qui mostriamo il prezzo in GBP, con un numero esatto di cifre decimali e il simbolo “narrow” della valuta (ossia “$100” invece di “US$100”). Per altre opzioni, consulta la documentazione di Intl.NumberFormatOptions.

import { Currency } from 'gt-react';

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

Note

• Il componente <Currency> viene utilizzato per formattare gli importi in base alla lingua/locale corrente e agli eventuali parametri opzionali forniti.
• Il componente si occupa esclusivamente della formattazione e non esegue calcoli sui tassi di cambio.
• I contenuti del componente <Currency> non vengono inviati all’API per la traduzione. Tutta la riformattazione viene eseguita localmente tramite la libreria Intl.NumberFormat.

Prossimi passaggi

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