<Num>

Descripción general

El componente <Num> muestra una cadena numérica formateada según la configuración regional del usuario, y puede personalizarse con opciones de formato.

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

Todo el reformateo se realiza localmente utilizando 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 actual y las opciones. 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 se reformateará según la configuración regional del usuario.

QuantityDisplay.jsx

import { Num } from 'gt-react';

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

Especificar 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-react';

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

Traducir componentes `<Num>`

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

DynamicPriceDisplay.jsx

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

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 formateo.

import { Num } from 'gt-react';

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 utilice 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