Descripción general

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

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

Todo el formato se gestiona localmente mediante 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 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-react';

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. Solo tienes que envolver el contenido con componentes <T>.

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

import { Num } from 'gt-react';

export default function FormatoPersonalizado(numero) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {numero}
    </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 obtener más detalles y ejemplos de uso del componente <Num> y de otros componentes de variables como <Currency>, <DateTime> y <Var>,