Descripción general

El componente <Currency> muestra un valor numérico como importe monetario. El número se formatea según el locale actual y cualquier parámetro opcional que se le pase. El componente de moneda solo gestiona el formato y no realiza cálculos de tipo de cambio.

<Currency>{100}</Currency>
// Salida: $100.00

Todo el formateo se realiza localmente mediante la biblioteca Intl.NumberFormat.

Referencias

Props

Descripción

Devuelve

JSX.Element que contiene la moneda formateada como una cadena.

Ejemplos

Ejemplo básico

El componente <Currency> se puede usar para mostrar importes en moneda según la configuración regional.

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

Especificar la moneda

Aquí mostramos el precio en euros.

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Traducción de componentes <Currency>

Supongamos que quieres que la moneda se muestre dentro de una oración que también esté traducida. Puedes envolver el componente <Currency> con un componente <T>.

import { T, Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      El precio es <Currency> {item.price} </Currency>.
    </T> 
  );
}

Formato personalizado

Aquí mostramos el precio en GBP con un número exacto de decimales y el símbolo reducido de la moneda (es decir, "$100" en lugar de "US$100"). Obtén más información sobre las Intl.NumberFormatOptions para ver más opciones.

import { Currency } from 'gt-next';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

Notas

• El componente <Currency> se usa para formatear importes según el locale actual y cualquier parámetro opcional que se le pase.
• Este componente solo se encarga del formato y no realiza cálculos de tipos de cambio.
• El contenido del componente <Currency> no se enviará a la API para su traducción. Todo el formateo se realiza localmente utilizando la biblioteca Intl.NumberFormat.

Próximos pasos

• Para obtener más detalles y ejemplos de uso del componente <Currency> y de otros componentes de variables como <Num>, <DateTime> y <Var>,