Descripción general

El componente <Num> muestra un número formateado según la locale del usuario y puede personalizarse mediante options de formato.

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

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

Referencias

Props

Descripción

Devuelve

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

Ejemplos

Ejemplo básico

En este ejemplo, item.quantity se volverá a formatear según la locale del usuario.

import { Num } from 'gt-next';

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

Especificar locales

De forma predeterminada, los locales se determinan según la configuración del navegador del usuario, pero puedes establecer explícitamente el locale para el componente <Num>.

import { Num } from 'gt-next';

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

Traducción de componentes <Num>

Supongamos que quieres incluir tu número dentro de una oración más larga que se traduzca. Simplemente envuelve el contenido con los componentes <T>.

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 API 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 usa para formatear números según la locale del usuario.
• Cuando esté 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 de otros componentes de variables como <Currency>, <DateTime> y <Var>,