Descripción general

El componente <Currency> muestra un valor numérico como moneda. El número se formatea según el locale actual y cualquier parámetro opcional proporcionado. El componente de moneda solo se encarga del formateo y no realiza cálculos de tipo de cambio.

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

Todo el reformatado se gestiona localmente con la biblioteca Intl.NumberFormat.

Referencias

Props

Descripción

Devuelve

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

Ejemplos

Ejemplo básico

El componente <Currency> se puede usar para mostrar valores de moneda localizados.

import { Currency } from 'gt-react'; 

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

Especificar la moneda

Aquí se muestra 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 que la moneda aparezca dentro de una frase que también se traduce. Puedes envolver el componente <Currency> en 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, especificando exactamente los decimales y usando el símbolo estrecho de la moneda (es decir, "$100" en lugar de "US$100"). Lee más sobre Intl.NumberFormatOptions para ver más options.

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 usa para formatear valores monetarios según el locale actual y cualquier parámetro opcional que se le pase.
• El componente <Currency> solo se encarga del formato y no realiza 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 más detalles y ejemplos de uso del componente <Currency> y de otros componentes de variables como <Num>, <DateTime> y <Var>,