<Num>

Descripción general

El componente <Num> renderiza una cadena de número formateada en la configuración regional del usuario, y puede personalizarse con opciones de formato.

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

Todo el reformateo se maneja localmente usando la biblioteca Intl.NumberFormat.

Referencia

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`value??`	`string \| number`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Descripción

Prop	Descripción
`children`	El contenido que se renderiza dentro del componente. Normalmente es un número, que será formateado según la configuración regional y las opciones actuales. Si se proporciona, tiene prioridad sobre la prop `value`.
`name`	Nombre opcional para el campo numérico, utilizado con fines de metadatos.
`value`	El valor predeterminado para el número. Puede ser una cadena o un número. Las cadenas se analizarán como números antes de formatear.
`options`	Opciones de formato opcionales para el número, siguiendo la especificación de `Intl.NumberFormatOptions`. Utiliza esto para definir estilos como moneda, precisión decimal, etc.
`locales`	Configuraciones regionales opcionales para especificar la configuración regional de formato. Si no se proporciona, se utiliza la configuración regional predeterminada del usuario. Lee más sobre cómo especificar configuraciones regionales aquí.

Retorna

JSX.Element que contiene el número formateado como una cadena.

Ejemplos

Ejemplo Básico

En este ejemplo, item.quantity será reformateado según la configuración regional del usuario.

QuantityDisplay.jsx

import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

Especificando configuraciones regionales

Por defecto, las configuraciones regionales se determinan por la configuración del navegador del usuario, pero puedes establecer explícitamente la configuración regional para el componente <Num>.

PriceDisplay.jsx

import { Num } from 'gt-next';

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

Traduciendo componentes `<Num>`

Digamos que quieres que tu número esté en una oración más larga que se traduzca. Simplemente agrega los componentes <T> alrededor del contenido.

DynamicPriceDisplay.jsx

import { T, Num } from 'gt-next';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      Hay <Num> {item.count} </Num> unidades disponibles. // [!code highlight]
    </T>
  );
}

Formato personalizado

<Num> utiliza la biblioteca Intl.NumberFormat para el formato.

import { Num } from 'gt-next';

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

Notas

El componente <Num> se utiliza para formatear números según la configuración regional del usuario.
Cuando se utiliza dentro de un componente <T>, asegúrate de envolver todos los números dinámicos en un componente <Num>.

Próximos pasos

Para más detalles y ejemplos de uso del componente <Num> y otros componentes de variables como <Currency>, <DateTime>, y <Var>, consulta la documentación de Uso de Componentes de Variables.

<Num>

En esta página