Descripción general

El componente <Currency> muestra un valor numérico como moneda. El número se formatea según el locale actual y los parámetros opcionales proporcionados. El componente de moneda solo se encarga del formato y no realiza cálculos de tipos de cambio.

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

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

Referencia

Props

Descripción

Valor de retorno

JSX.Element que contiene la moneda formateada como cadena.

Ejemplos

Ejemplo básico

El componente <Currency> se puede usar para mostrar valores de moneda con formato localizado.

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> en 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 usando el símbolo estrecho de la moneda (es decir, "$100" en lugar de "US$100"). Obtén más información sobre Intl.NumberFormatOptions para ver más options.

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 valores monetarios según el locale actual y los parámetros opcionales que se le pasen.
• El componente de moneda solo realiza el formateo y no efectúa cálculos de tipo de cambio.
• El contenido del componente <Currency> no se enviará a la API para su traducción. Todo el formateo se realiza localmente con 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>,