Valor de la divisa

Valor de la divisa en Storybook

Uso

Este es un componente de utilidades para renderizar y dar formato a los datos, por eso, no hay pautas de UX específicas.

Código

<CurrencyValue value={123456} />

Instrucción de importación

import { CurrencyValue } from '@jutro/components';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

idobligatorio

Tipo

string

Descripción

Unique identifier for the component.

amount

Tipo

number | string

Descripción

The numeric value to display. Equivalent to the amount property in an object entered in the value property.

className

Tipo

string

Descripción

CSS class name for this component.

currency

Tipo

string

Descripción

The currency name to display for localization. Equivalent to the currency property in an object entered in the value property.

currencyDisplay

Tipo

'code' | 'symbol' | 'name'

Descripción

The format of the currency name to display for localization.

Valor predeterminado

symbol

path

Tipo

string

Descripción

Specifies the path to the value used to generate the output.

placeholder

Tipo

IntlMessageShape

Descripción

The string to display in the UI if amount is undefined/null.

Valor predeterminado

'-'

prefix

Tipo

IntlMessageShape

Descripción

Optional prefix message to be attached in front of the value.

showFractions

Tipo

boolean

Descripción

If true, displays fractions with the amount. If false, it will round the value to the nearest whole number.

Valor predeterminado

true

showGrouping

Tipo

boolean

Descripción

If true, displays grouping separators with the value.

Valor predeterminado

true

suffix

Tipo

IntlMessageShape

Descripción

Optional suffix message to be attached at the end of the value.

tag

Tipo

string

Descripción

The HTML tag to use when rendering the outermost element of this component.

Valor predeterminado

'div'

value

Tipo

number | string | { amount: number | string, currency: string }

Descripción

Value to display. If the type is number', it will be used as the currencyamount. If the type is 'string', it will be cast to 'number', then used as currencyamount. If the type is an object, it will set thecurrencyandamount`.

API imperativa

jutro-components ofrece la función formatCurrency para usar con la API de formato imperativo.

import { formatCurrency } from '@jutro/components';

Esto importa una función formatCurrency(intl, props, currencyObject) con los siguientes argumentos y tipo de retorno:

Return value

Tipo

string

Descripción

Formatted currency string.

currencyObject

Tipo

number | string | { amount: number | string, currency: string }

Descripción

Currency value override to be used instead of the one provided with props.

intl

Tipo

react.intl.Intl

Descripción

An instance of the imperative formatting API access object.

props

Tipo

CurrencyValue.propTypes

Descripción

Valid properties for a CurrencyValue object.

Ganchos

No hay ganchos para Valor de la divisa.

Claves de traducción

No hay traducciones para Valor de la divisa.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un valor de divisa correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de valor de divisa básico

El componente CurrencyValue puede tomar un valor numérico y renderizarlo como un monto monetario. Agregará un símbolo de divisa, separadores y un separador decimal según la ubicación.

<CurrencyValue value={123456} />

Ejemplo de entrada de objeto

La propiedad valor puede tomar un objeto que indique la cantidad y la divisa del valor que se mostrará. La propiedad de divisa debe ser un código de moneda alfabético ISO 4217.

<CurrencyValue value={ {amount: 123456, currency: "EUR"} } />
<CurrencyValue value={ {amount: 123456, currency: "USD"} } />

Propiedades de monto y divisa

Puede utilizar las propiedades amount y currency en el componente CurrencyValue como alternativa a la configuración de un objeto en la propiedad value.

<CurrencyValue amount={ 123456 } currency="EUR" />
<CurrencyValue amount={ 123456 } currency="USD" />

Formato de divisa

Puede utilizar la propiedad currencyDisplay para establecer si desea mostrar el símbolo, el código de divisa alfabético ISO 4217 o el nombre de la divisa.

<CurrencyValue value={123456} currencyDisplay="code" />
<CurrencyValue value={123456} currencyDisplay="symbol" />
<CurrencyValue value={123456} currencyDisplay="name" />

Mostrar fracciones

Puede elegir si desea mostrar la parte fraccionaria del valor utilizando la propiedad showFractions. Esto redondeará el valor al número entero más cercano.

<CurrencyValue
  value={1234.5} // note that this becomes 1235 in the sample above due to rounding
  showFractions={false}
/>

Ejemplo de API imperativa

jutro-components ofrece la función formatCurrency para usar con la API de formato imperativo.

import { formatCurrency } from '@jutro/components';
import { useIntl } from '@jutro/locale';
...
const intl = useIntl();
...
const c1 = formatCurrency(intl, { value: 1232.24, currency: 'eur', showFractions: true });
const c2 = formatCurrency(intl, { value: 4232.24, currency: 'jpy', showFractions: true, currencyDisplay: 'code'});
const c3 = formatCurrency(intl, { showFractions: true }, { amount: 23434.34, currency: 'dkk' });

// en-US output:
€1,232.24
JPY 4,232
DKK 23,434.34

// pl-PL output
1232,24 €
4232 JPY
23 434,34 DKK

Registro de cambios