Skip to main content

Currency value

Currency value in Storybook

Examples​

Check out the Usage section for details about how to design a currency value properly, and the different configuration options we provide.

Basic example​

The CurrencyValue component can take a numeric value and render it as a monetary amount. It will add a currency symbol, separators, and a decimal separator based on the locale.

<CurrencyValue value={ 123456 } />

Object input example​

The value property can take an object that states the amount and currency of the value to display. The currency property needs to be an ISO 4217 alphabetic currency code.

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

Amount and currency properties​

You can use the amount and currency properties in the CurrencyValue component as an alternative to setting an object in the value property.

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

Currency format​

You can use the currencyDisplay property to set whether to display the symbol, ISO 4217 alphabetic currency code, or name for the currency.

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

Show fractions​

You can choose whether to display the fraction part of the value using the showFractions property. This will round the value to the nearest whole number.

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

Imperative API example​

jutro-components offers the formatCurrency function for use with the imperative formatting API.

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