# General Translation React SDKs (gt-react, gt-next, gt-react-native): URL: https://generaltranslation.com/es/docs/react/reference/components/num.mdx --- title: "" description: Formatea un número según la configuración regional activa. Referencia de la API del componente . --- El componente `` 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 [``](/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 `` lo formateará según la configuración regional activa. ```tsx {100} // 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 [``](/docs/react/reference/components/t).** Cuando se use dentro de un [``](/docs/react/reference/components/t), envuelve cada número dinámico en un `` 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 {item.quantity}; // [!code highlight] } ``` ```tsx title="CountDisplay.tsx" import { Num } from 'gt-react'; export default function CountDisplay({ item }) { return {item.count}; // [!code highlight] } ``` ```tsx title="DynamicPriceDisplay.tsx" import { T, Num } from 'gt-react'; export default function DynamicPriceDisplay({ item }) { return ( There are {item.count} units available. // [!code highlight] ); } ``` ```tsx title="CustomFormat.tsx" import { Num } from 'gt-react'; export default function CustomFormat({ number }) { return ( {number} ); } ``` ## Notas [#notes] * `` formatea los números según la configuración regional activa. * Dentro de un [``](/docs/react/reference/components/t), envuelve todos los números dinámicos en un ``.