Descripción general

El componente <Num> muestra una cadena numérica formateada según el locale del usuario y puede personalizarse con options de formato.

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

Todo el reformateo se realiza localmente con 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 el 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 por 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> // [!resaltar código]
  );
}

Traducción de componentes <Num>

Supongamos que quieres que tu número forme parte de una oración más larga que se traduzca. Solo añade los componentes <T> alrededor del contenido.

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 usa para formatear números según el 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 obtener más detalles y ejemplos de uso del componente <Num> y de otros componentes de variables como <Currency>, <DateTime> y <Var>,