Descripción general

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

<Num>{100}</Num>
// Salida: 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 la locale del usuario.

import { Num } from 'gt-react';

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

Especificar locales

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

import { Num } from 'gt-react';

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

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

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

Formatos personalizados

<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 usa para formatear números según el locale del usuario.
• Cuando estés 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>,