Descripción general

El componente <Currency> muestra un valor numérico como importe monetario. El número se formatea según la locale actual y los parámetros opcionales que se especifiquen. Este componente solo se encarga del formato y no realiza ningún cálculo de tipo de cambio.

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

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

Referencias

Props

Descripción

Devuelve

JSX.Element que contiene la moneda con formato como cadena.

Ejemplos

Ejemplo básico

El componente <Currency> se puede utilizar para mostrar importes de moneda con formato local.

import { Currency } from 'gt-react'; 

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

Especificar la moneda

Aquí mostramos el precio en euros.

import { Currency } from 'gt-react';

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

Traducción de componentes <Currency>

Supongamos que quieres mostrar la divisa dentro de una oración que también se traduce. Puedes envolver el componente <Currency> dentro de un componente <T>.

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      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 angosto de la moneda (es decir, "$100" en lugar de "US$100"). Consulta más información sobre las Intl.NumberFormatOptions para ver más opciones.

import { Currency } from 'gt-react';

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

Notas

• El componente <Currency> se utiliza para formatear importes monetarios según el locale actual y cualquier parámetro opcional proporcionado.
• Este componente únicamente se encarga del formateo; 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 más detalles y ejemplos de uso del componente <Currency> y de otros componentes de variables como <Num>, <DateTime> y <Var>,