<Currency>

Descripción general

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

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

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

Referencia

Props

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

Descripción

Prop	Descripción
`children`	El contenido que se renderiza dentro del componente. Normalmente es 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 con fines de metadatos.
`value`	El valor predeterminado para la moneda. Usará children si no se proporciona. Puede ser una cadena o un número. Las cadenas se convertirán a número antes de formatear.
`currency`	El tipo de moneda, como "USD" o "EUR". Esto determina el símbolo y el formato utilizados para la moneda.
`options`	Opciones de formato opcionales para la moneda, siguiendo la especificación de `Intl.NumberFormatOptions`. Utiliza esto para definir estilos como el número máximo de decimales, agrupación, etc.
`locales`	Locales opcionales para especificar la configuración regional de formato. Si no se proporciona, se utiliza la configuración regional predeterminada del usuario. 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>
  );
}

Especificar 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> 
  );
}

Traducir componentes `<Currency>`

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

PriceDisplay.jsx

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

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

Formato personalizado

Aquí estamos mostrando el precio en GBP especificando exactamente los decimales y usando 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 monetarios según la configuración regional actual y cualquier parámetro opcional que se pase.
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 obtener 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 de variables.

<Currency>

En esta página