# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Num>`
URL: https://generaltranslation.com/es/docs/react/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Formatea un número según la configuración regional activa. Referencia de la API del componente `<Num>`.

El componente `<Num>` aplica agrupación de dígitos y formato decimal adaptados a la configuración regional a un número. Es un componente de variable que puede usarse dentro de un [`<T>`](/docs/react/reference/components/t) o por sí solo.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`.*

## Descripción general [#overview]

Pasa un número como children y `<Num>` lo formateará según la configuración regional activa.

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

Todo el formateo se gestiona localmente con [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Cómo funciona [#how-it-works]

* **Formato local.** El número se reformatea en el navegador con `Intl.NumberFormat`. Su valor nunca se envía a la API de General Translation.
* **Resolución de la configuración regional.** De forma predeterminada, la configuración regional activa determina los separadores de miles y decimales. Puedes sobrescribirla en cada instancia con `locales`.
* **Dentro de un [`<T>`](/docs/react/reference/components/t).** Cuando se use dentro de un [`<T>`](/docs/react/reference/components/t), envuelve cada número dinámico en un `<Num>` para que se trate como una variable y no como texto traducible.

## Props [#props]

| Prop                    | Descripción                                          | Type                       | Opcional | Predeterminado                |
| ----------------------- | ---------------------------------------------------- | -------------------------- | -------- | ----------------------------- |
| [`children`](#children) | El número que se va a formatear.                     | `number \| string`         | No       | —                             |
| [`options`](#options)   | Opciones de `Intl.NumberFormat`.                     | `Intl.NumberFormatOptions` | Sí       | `{}`                          |
| [`locales`](#locales)   | Configuración regional para sobrescribir el formato. | `string[]`                 | Sí       | configuración regional activa |
| [`name`](#name)         | Nombre de la variable de la entrada.                 | `string`                   | Sí       | —                             |

### `children` [#children]

**Tipo** `number | string` · **Requerido**

El número que se va a formatear. Las cadenas se interpretan como números antes de formatearse.

### `options` [#options]

**Tipo** `Intl.NumberFormatOptions` · **Opcional** · **Predeterminado** `{}`

La prop admite [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Entre las opciones más habituales se incluyen:

| Opción                     | Descripción                                                                                     | Tipo                                                                                                                 | Opcional | Predeterminado                           |
| -------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| `localeMatcher`            | Algoritmo de coincidencia de configuraciones regionales.                                        | `'lookup' \| 'best fit'`                                                                                             | Sí       | `'best fit'`                             |
| `numberingSystem`          | Sistema de numeración, como `latn` o `arab`.                                                    | `string`                                                                                                             | Sí       | `'latn'`                                 |
| `style`                    | Formato de número decimal, moneda, porcentaje o unidad.                                         | `'decimal' \| 'currency' \| 'percent' \| 'unit'`                                                                     | Sí       | `'decimal'`                              |
| `currency`                 | Código de divisa ISO 4217. Obligatorio cuando `style` es `'currency'`.                          | `string`                                                                                                             | Sí       | —                                        |
| `currencyDisplay`          | Cómo mostrar una divisa.                                                                        | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | Sí       | `'symbol'`                               |
| `currencySign`             | Notación estándar o contable para valores monetarios negativos.                                 | `'standard' \| 'accounting'`                                                                                         | Sí       | `'standard'`                             |
| `unit`                     | Identificador de unidad, como `kilometer` o `megabyte`. Obligatorio cuando `style` es `'unit'`. | `string`                                                                                                             | Sí       | —                                        |
| `unitDisplay`              | Longitud de la etiqueta de unidad.                                                              | `'long' \| 'short' \| 'narrow'`                                                                                      | Sí       | `'short'`                                |
| `minimumIntegerDigits`     | Número mínimo de dígitos enteros; los valores más cortos se rellenan con ceros.                 | `number` (`1`–`21`)                                                                                                  | Sí       | `1`                                      |
| `minimumFractionDigits`    | Número mínimo de dígitos después del separador decimal.                                         | `number` (`0`–`100`)                                                                                                 | Sí       | Depende del estilo                       |
| `maximumFractionDigits`    | Número máximo de dígitos después del separador decimal.                                         | `number` (`0`–`100`)                                                                                                 | Sí       | Depende del estilo                       |
| `minimumSignificantDigits` | Número mínimo de dígitos significativos.                                                        | `number` (`1`–`21`)                                                                                                  | Sí       | `1`                                      |
| `maximumSignificantDigits` | Número máximo de dígitos significativos.                                                        | `number` (`1`–`21`)                                                                                                  | Sí       | `21`                                     |
| `roundingPriority`         | Indica si tienen prioridad los dígitos fraccionarios o los significativos.                      | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Sí       | `'auto'`                                 |
| `roundingIncrement`        | Incremento utilizado en la magnitud de redondeo seleccionada.                                   | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000`                    | Sí       | `1`                                      |
| `roundingMode`             | Dirección utilizada para redondear.                                                             | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sí       | `'halfExpand'`                           |
| `trailingZeroDisplay`      | Indica si se conservan los ceros finales en números enteros.                                    | `'auto' \| 'stripIfInteger'`                                                                                         | Sí       | `'auto'`                                 |
| `notation`                 | Notación estándar, científica, de ingeniería o compacta.                                        | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Sí       | `'standard'`                             |
| `compactDisplay`           | Etiquetas largas o cortas para la notación compacta.                                            | `'short' \| 'long'`                                                                                                  | Sí       | `'short'`                                |
| `useGrouping`              | Cuándo mostrar separadores de agrupación.                                                       | `boolean \| 'always' \| 'auto' \| 'min2'`                                                                            | Sí       | `'auto'`; `'min2'` con notación compacta |
| `signDisplay`              | Cuándo mostrar un signo positivo o negativo.                                                    | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Sí       | `'auto'`                                 |

* Los valores predeterminados de los dígitos fraccionarios dependen de `style` y, en el caso de las monedas, de las unidades menores estándar de cada moneda.
* `compactDisplay` solo se aplica cuando `notation` es `'compact'`.
* `roundingIncrement` no se puede combinar con el redondeo por dígitos significativos ni con un `roundingPriority` distinto de `'auto'`.
* Las unidades compatibles, los sistemas de numeración, los campos de redondeo y los valores de las opciones dependen del entorno de ejecución de JavaScript.

Consulta la [documentación sobre las opciones de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) para conocer las opciones disponibles más recientes y el comportamiento del entorno de ejecución.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Locales que se usarán para dar formato. Cuando se omite, se usa la configuración regional activa. Consulta el [argumento `locales`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).

### `name` [#name]

**Tipo** `string` · **Opcional**

Un nombre opcional para el campo numérico, que se usa como metadato.

## Ejemplos [#examples]

*Los ejemplos importan desde `gt-react`; importa desde el package de tu 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>
  );
}
```

## Notas [#notes]

* `<Num>` formatea los números según la configuración regional activa.
* Dentro de un [`<T>`](/docs/react/reference/components/t), envuelve todos los números dinámicos en un `<Num>`.

## Sitemap

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