<Num>

Resumen

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

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

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

Referencia

Props

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

Descripción

Prop	Descripción
`children`	El contenido para renderizar dentro del componente. Normalmente un número, que se formateará de acuerdo con la configuración regional actual y las opciones. Si se proporciona, tiene prioridad sobre la prop `value`.
`name`	Nombre opcional para el campo de número, utilizado para propósitos de metadatos.
`value`	El valor predeterminado para el número. Puede ser una cadena o un número. Las cadenas se analizarán en números antes de formatear.
`options`	Opciones de formato opcionales para el número, siguiendo la especificación de `Intl.NumberFormatOptions`. Usa esto para definir estilos como moneda, precisión decimal, etc.
`locales`	Locales 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 locales aquí.

Retorna

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

Ejemplos

Ejemplo Básico

En este ejemplo, item.quantity se reformateará 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>`

Supongamos que quieres que tu número esté en una oración más larga que se traduzca. Simplemente añade 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>
  );
}

Formateo personalizado

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

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 de un usuario.
Cuando esté dentro de un componente <T>, asegúrese 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