<Currency>

Resumen

El componente <Currency> renderiza un valor numérico como una moneda. El número se formatea según la configuración regional actual y cualquier parámetro opcional pasado. El componente de moneda solo maneja el formato y no realiza ningún cálculo de tipo de cambio.

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

Todo el reformateo se maneja localmente usando la biblioteca Intl.NumberFormat.

Referencia

Props

Prop	Type	Default
`children??`	`any`	`undefined`
`name??`	`string`	`undefined`
`value??`	`string \| number`	`undefined`
`currency??`	`string`	`"USD"`
`options??`	`Intl.NumberFormatOptions`	`{}`
`locales??`	`string[]`	`undefined`

Descripción

Prop	Descripción
`children`	El contenido para renderizar dentro del componente. Normalmente un número que representa el valor a formatear como moneda. Si se proporciona, tiene prioridad sobre la prop `value`.
`name`	Nombre opcional para el campo de moneda, utilizado para propósitos de metadatos.
`value`	El valor predeterminado para la moneda. Se usará `children` si no se proporciona. Puede ser una cadena o un número. Las cadenas se analizarán en números antes de formatear.
`currency`	El tipo de moneda, como "USD" o "EUR". Esto determina el símbolo y el formato utilizado para la moneda.
`options`	Opciones de formato opcionales para la moneda, siguiendo la especificación `Intl.NumberFormatOptions`. Usa esto para definir estilos como dígitos fraccionarios máximos, agrupación, etc.
`locales`	Locales opcionales para especificar el formato local. Si no se proporciona, se utiliza el local del usuario por defecto. Lee más sobre cómo especificar locales aquí.

Retorna

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

Ejemplos

Ejemplo básico

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

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

Especificando la moneda

Aquí estamos mostrando el precio en Euros.

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

Traduciendo componentes `<Currency>`

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

PriceDisplay.jsx

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í estamos mostrando el precio en GBP que especifica exactamente los lugares decimales y usa el símbolo estrecho para la moneda (es decir, "$100" en lugar de "US$100"). Lee más sobre las Intl.NumberFormatOptions para más opciones.

PriceDisplay.jsx

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 utiliza para formatear valores de moneda según la configuración regional actual y cualquier parámetro opcional pasado.
El componente de moneda solo maneja el formato y no realiza ningún cálculo de tipo de cambio.
El contenido del componente <Currency> no se enviará a la API para traducción. Todo el reformateo se realiza localmente utilizando la biblioteca Intl.NumberFormat.

Próximos Pasos

Para más detalles y ejemplos de uso del componente <Currency> y otros componentes de variables como <Num>, <DateTime>, y <Var>, consulta la documentación de Uso de Componentes Variables.

<Currency>

En esta página