# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Num>`
URL: https://generaltranslation.com/it/docs/react/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Formatta un numero in base all'impostazione regionale attiva. Riferimento API del componente `<Num>`.

Il componente `<Num>` applica a un numero il raggruppamento delle cifre e la formattazione decimale in base all&#39;impostazione regionale. È 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`.*

## 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>`](/docs/react/reference/components/t).** Se usato all&#39;interno di un [`<T>`](/docs/react/reference/components/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]

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

La prop accetta [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Tra le opzioni più comuni:

| Opzione                    | Descrizione                                                                                                 | Tipo                                                                                                                 | Facoltativo | Predefinito                               |
| -------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |
| `localeMatcher`            | Algoritmo di matching dell&#39;impostazione regionale.                                                      | `'lookup' \| 'best fit'`                                                                                             | Sì          | `'best fit'`                              |
| `numberingSystem`          | Sistema di numerazione, ad esempio `latn` o `arab`.                                                         | `string`                                                                                                             | Sì          | `'latn'`                                  |
| `style`                    | Formattazione come numero decimale, valuta, percentuale o unità.                                            | `'decimal' \| 'currency' \| 'percent' \| 'unit'`                                                                     | Sì          | `'decimal'`                               |
| `currency`                 | Codice valuta ISO 4217. Obbligatorio quando `style` è `'currency'`.                                         | `string`                                                                                                             | Sì          | —                                         |
| `currencyDisplay`          | Modalità di visualizzazione della valuta.                                                                   | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | Sì          | `'symbol'`                                |
| `currencySign`             | Notazione standard o contabile per valori monetari negativi.                                                | `'standard' \| 'accounting'`                                                                                         | Sì          | `'standard'`                              |
| `unit`                     | Identificatore dell&#39;unità, ad esempio `kilometer` o `megabyte`. Obbligatorio quando `style` è `'unit'`. | `string`                                                                                                             | Sì          | —                                         |
| `unitDisplay`              | Lunghezza dell&#39;etichetta dell&#39;unità.                                                                | `'long' \| 'short' \| 'narrow'`                                                                                      | Sì          | `'short'`                                 |
| `minimumIntegerDigits`     | Numero minimo di cifre intere; i valori più brevi vengono completati con zeri iniziali.                     | `number` (`1`–`21`)                                                                                                  | Sì          | `1`                                       |
| `minimumFractionDigits`    | Numero minimo di cifre dopo il separatore decimale.                                                         | `number` (`0`–`100`)                                                                                                 | Sì          | Dipende dallo stile                       |
| `maximumFractionDigits`    | Numero massimo di cifre dopo il separatore decimale.                                                        | `number` (`0`–`100`)                                                                                                 | Sì          | Dipende dallo stile                       |
| `minimumSignificantDigits` | Numero minimo di cifre significative.                                                                       | `number` (`1`–`21`)                                                                                                  | Sì          | `1`                                       |
| `maximumSignificantDigits` | Numero massimo di cifre significative.                                                                      | `number` (`1`–`21`)                                                                                                  | Sì          | `21`                                      |
| `roundingPriority`         | Se hanno priorità le cifre frazionarie o quelle significative.                                              | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Sì          | `'auto'`                                  |
| `roundingIncrement`        | Incremento utilizzato al livello di arrotondamento selezionato.                                             | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000`                    | Sì          | `1`                                       |
| `roundingMode`             | Direzione usata per l&#39;arrotondamento.                                                                   | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sì          | `'halfExpand'`                            |
| `trailingZeroDisplay`      | Se mantenere gli zeri finali nei numeri interi.                                                             | `'auto' \| 'stripIfInteger'`                                                                                         | Sì          | `'auto'`                                  |
| `notation`                 | Notazione standard, scientifica, ingegneristica o compatta.                                                 | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Sì          | `'standard'`                              |
| `compactDisplay`           | Etichette estese o brevi per la notazione compatta.                                                         | `'short' \| 'long'`                                                                                                  | Sì          | `'short'`                                 |
| `useGrouping`              | Quando visualizzare i separatori delle migliaia.                                                            | `boolean \| 'always' \| 'auto' \| 'min2'`                                                                            | Sì          | `'auto'`; `'min2'` con notazione compatta |
| `signDisplay`              | Quando visualizzare il segno positivo o negativo.                                                           | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Sì          | `'auto'`                                  |

* I valori predefiniti per le cifre decimali dipendono da `style` e, per le valute, dalle relative unità minori standard.
* `compactDisplay` si applica solo quando `notation` è impostato su `'compact'`.
* `roundingIncrement` non può essere combinato con l&#39;arrotondamento per cifre significative né con un valore di `roundingPriority` diverso da `'auto'`.
* Le unità supportate, i sistemi di numerazione, i campi di arrotondamento e i valori delle opzioni dipendono dal runtime JavaScript.

Consulta la [documentazione delle opzioni di `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) per conoscere le opzioni più recenti disponibili e il comportamento del runtime.

### `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]

*Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

```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>`](/docs/react/reference/components/t), racchiudi tutti i numeri dinamici in un tag `<Num>`.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.