Currency value
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