# gt-react: General Translation React SDK: Currency
URL: https://generaltranslation.com/it/docs/react/api/components/currency.mdx
---
title: Currency
description: Documentazione di riferimento dell'API per il componente Currency
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il template in content/docs-templates/. */}


## Panoramica

Il componente `<Currency>` visualizza un valore numerico come importo in valuta.
Il numero viene formattato in base all&#39;impostazione regionale corrente e agli eventuali parametri facoltativi passati.
Il componente `<Currency>` gestisce solo la formattazione e non esegue alcun calcolo dei tassi di cambio.

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

Tutta la formattazione viene gestita localmente tramite la libreria [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).


## Riferimento

### Proprietà

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valore facoltativo. Se non viene fornito, come valore verrà usato children.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizione

| Prop       | Descrizione                                                                                                                                                                                                                                                                                                                                                                            |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Il contenuto da visualizzare all&#39;interno del componente. In genere è un numero che rappresenta il valore da formattare come valuta. Se fornito, ha la precedenza sulla prop `value`.                                                                                                                                                                                               |
| `name`     | Nome facoltativo del campo valuta, usato a scopo di metadati.                                                                                                                                                                                                                                                                                                                          |
| `value`    | Il valore predefinito della valuta. Se non viene fornito, verrà usato `children` come fallback. Può essere una stringa o un numero. Le stringhe verranno convertite in numeri prima della formattazione.                                                                                                                                                                               |
| `currency` | Il tipo di valuta, come &quot;USD&quot; o &quot;EUR&quot;. Determina il simbolo e la formattazione usati per la valuta.                                                                                                                                                                                                                                                                |
| `options`  | Opzioni facoltative di formattazione della valuta, secondo la specifica [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Usale per definire impostazioni come il numero massimo di cifre decimali, il raggruppamento e così via.                                                                      |
| `locales`  | Impostazioni regionali facoltative per specificare l&#39;impostazione regionale di formattazione. Se non vengono fornite, viene usata l&#39;impostazione regionale predefinita dell&#39;utente. Per saperne di più su come specificare le impostazioni regionali, leggi [qui](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Restituisce

`JSX.Element` contenente l&#39;importo formattato come stringa.

***

## Esempi

### Esempio di base

Il componente `<Currency>` può essere utilizzato per visualizzare importi nella valuta locale.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```


### Specificare la valuta

Qui mostriamo il prezzo in euro.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```


### Tradurre i componenti Currency

Supponiamo che tu voglia visualizzare la valuta all&#39;interno di una frase che viene anch&#39;essa tradotta.
Puoi racchiudere il componente `<Currency>` in un componente `<T>`.

```jsx title="PriceDisplay.jsx" copy
import { T, Currency } from 'gt-react';

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


### Formattazione personalizzata

Qui viene visualizzato il prezzo in GBP specificando un numero esatto di cifre decimali e usando il simbolo valuta ristretto (cioè &quot;$100&quot; invece di &quot;US$100&quot;).
Per altre opzioni, consulta [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react';

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

***


## Note

* Il componente `<Currency>` viene usato per formattare i valori monetari in base all&#39;impostazione regionale corrente e agli eventuali parametri facoltativi passati.
* Il componente `<Currency>` gestisce solo la formattazione e non esegue alcun calcolo del tasso di cambio.
* Il contenuto del componente `<Currency>` non verrà inviato all&#39;API per la traduzione.
  Tutta la formattazione viene eseguita localmente usando la libreria [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Prossimi passi

* Per maggiori dettagli ed esempi d&#39;uso del componente `<Currency>` e di altri componenti variabili come `<Num>`, `<DateTime>` e `<Var>`, consulta la documentazione [Uso dei componenti variabili](/docs/react/guides/variables).