Currency value

Currency value in Storybook

The CurrencyValue component renders a formatted currency using the tag property to wrap the value.

currencyDisplay

This prop, by default has the value symbol, which typically outputs currency symbols like $, €, £ etc.

However, the exact behavior also depends on the chosen locale.

For example, if I want to format a Danish krone amount, even if I use currencyDisplay: 'symbol', the chosen locale will change the currency symbol, as per:

• 100 kr. // in the Danish locale
• 100 DKK // in the German locale

Currency objects

Currency object are those objects that have these two properties:

• amount - a number
• currency - the code for the currency in question (USD, JPY etc.)

Prefix and suffix

Use prefix and suffix props with caution.

Usage will produce what are essentially concatenated strings, like:

"Some prefix string " + someCurrencyValue + " some suffix string"

This is not localization friendly. Better practice would be to use a formatted message.

Inlining

By default, the value comes back wrapped in a <div>.

If you want to inline the number value, then set the tag prop to span.

Imperative API

jutro-components offers the formatCurrency API.

formatCurrency(intl, props, currencyObject), where:

• @param {import('react-intl').Intl} intl - instance of the imperative formatting API access object
• @param {PropTypes.InferProps<FormattedCurrency.propTypes>} props - FormattedCurrency props
• @param {{amount?: number, currency?: string }} [currencyObject] - optional override for currency value from props
• @returns {string} - Formatted currency string

Examples

import { formatCurrency } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
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