# gt-react: General Translation React SDK: Num
URL: https://generaltranslation.com/it/docs/react/api/components/num.mdx
---
title: Num
description: Riferimento API del componente Num
---

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


## Panoramica

Il componente `<Num>` visualizza una stringa numerica formattata in base all&#39;impostazione regionale dell&#39;utente e può essere personalizzato con opzioni di formattazione.

```jsx
<Num>{100}</Num>
// Output: 100
```

La formattazione viene gestita interamente in locale utilizzando 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?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "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 verrà formattato in base all&#39;impostazione regionale corrente e alle opzioni specificate. Se fornito, ha la precedenza sulla prop `value`.                                                                                                                                                               |
| `name`     | Nome facoltativo del campo numerico, usato per finalità di metadati.                                                                                                                                                                                                                                                                                                                                |
| `value`    | Il valore predefinito del numero. Può essere una stringa o un numero. Le stringhe verranno convertite in numeri prima della formattazione.                                                                                                                                                                                                                                                          |
| `options`  | Opzioni facoltative di formattazione del numero, conformi alla specifica [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Usale per definire stili come valuta, precisione decimale 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, consulta [questa pagina](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Restituisce

`JSX.Element` che contiene il numero formattato come stringa.

***

## Esempi

### Esempio di base

In questo esempio, `item.quantity` verrà riformattato in base all’impostazione regionale dell’utente.

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

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


### Specificare le impostazioni regionali

Per impostazione predefinita, le impostazioni regionali vengono ricavate da quelle del browser dell&#39;utente,
ma puoi impostare esplicitamente l&#39;impostazione regionale per il componente `<Num>`.

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

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> // [!code highlight]
  );
}
```


### Tradurre i componenti Num

Supponiamo che tu voglia inserire il numero in una frase più lunga da tradurre.
Ti basta racchiudere il contenuto nei componenti `<T>`.

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

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### Formattazione personalizzata

`<Num>` usa la libreria [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) per formattare i numeri.

```jsx
import { Num } from 'gt-react';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}
```

***


## Note

* Il componente `<Num>` viene usato per formattare i numeri in base all&#39;impostazione regionale dell&#39;utente.
* All&#39;interno di un componente `<T>`, assicurati di racchiudere tutti i numeri dinamici in un componente `<Num>`.

## Passaggi successivi

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