# General Translation React SDKs (gt-react, gt-next): Num
URL: https://generaltranslation.com/it/docs/react/reference/components/num.mdx
---

title: Num
description: Formatta un numero in base all'impostazione regionale attiva con General Translation gt-react. Riferimento API di Num.

---

Il componente `<Num>` mostra un numero formattato per l&#39;impostazione regionale attiva. È un componente variabile da usare all&#39;interno di un [`<T>`](/docs/react/reference/components/t) oppure da solo.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del framework che usi.*

## Panoramica [#overview]

Passa un numero come contenuto figlio e `<Num>` lo formatta in base all&#39;impostazione regionale attiva.

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

La formattazione viene gestita interamente in locale con [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Come funziona [#how-it-works]

* **Formattazione locale.** Il numero viene riformattato nel browser usando `Intl.NumberFormat`. Il suo valore non viene mai inviato all&#39;API di General Translation.
* **Risoluzione dell&#39;impostazione regionale.** Per impostazione predefinita, l&#39;impostazione regionale attiva determina i separatori delle migliaia e dei decimali. Puoi sovrascriverla per singola istanza con `locales`.
* **All&#39;interno di un `<T>`.** Se usato all&#39;interno di un `<T>`, racchiudi ogni numero dinamico in un `<Num>` in modo che venga trattato come una variabile anziché come testo traducibile.

## Props [#props]

| Prop                    | Descrizione                                           | Type                       | Facoltativo | Predefinito                   |
| ----------------------- | ----------------------------------------------------- | -------------------------- | ----------- | ----------------------------- |
| [`children`](#children) | Il numero da formattare.                              | `number \| string`         | No          | —                             |
| [`options`](#options)   | Opzioni di `Intl.NumberFormat`.                       | `Intl.NumberFormatOptions` | Sì          | `{}`                          |
| [`locales`](#locales)   | Impostazione regionale da usare per la formattazione. | `string[]`                 | Sì          | Impostazione regionale attiva |
| [`name`](#name)         | Nome della variabile per la voce.                     | `string`                   | Sì          | —                             |

### `children` [#children]

**Tipo** `number | string` · **Obbligatorio**

Il numero da formattare. Le stringhe vengono convertite in numeri prima della formattazione.

### `options` [#options]

**Type** `Intl.NumberFormatOptions` · **Facoltativo** · **Predefinito** `{}`

Opzioni di formattazione conformi alla specifica [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), come `style`, `maximumFractionDigits` e il raggruppamento.

### `locales` [#locales]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** Impostazione regionale attiva

Impostazioni regionali da utilizzare per la formattazione. Se omesso, viene utilizzata l&#39;impostazione regionale attiva. Vedi l&#39;[argomento locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Type** `string` · **Facoltativo**

Un nome facoltativo per il campo numerico, utilizzato come metadato.

## Esempi [#examples]

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

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

```tsx title="CountDisplay.tsx"
import { Num } from 'gt-react';

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

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

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

```tsx title="CustomFormat.tsx"
import { Num } from 'gt-react';

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

## Note [#notes]

* `<Num>` formatta i numeri in base all&#39;impostazione regionale attiva.
* All&#39;interno di un `<T>`, racchiudi tutti i numeri dinamici in un tag `<Num>`.