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
Usage
This is a utility component for rendering and formatting data, so there are no specific UX guidelines.
Code
<CurrencyValue value={ 123456 } />
Import statement
import { CurrencyValue } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
idrequired- Type
stringDescriptionUnique identifier for the component.
amount- Type
number | stringDescriptionThe numeric value to display. Equivalent to the
amountproperty in an object entered in thevalueproperty. className- Type
stringDescriptionCSS class name for this component.
currency- Type
stringDescriptionThe currency name to display for localization. Equivalent to the
currencyproperty in an object entered in thevalueproperty. currencyDisplay- Type
'code' | 'symbol' | 'name'DescriptionThe format of the currency name to display for localization.
Default valuesymbol path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
placeholder- TypeDescription
The string to display in the UI if
amountis undefined/null.Default value'-' prefix- TypeDescription
Optional prefix message to be attached in front of the value.
showFractions- Type
booleanDescriptionIf
true, displays fractions with the amount. Iffalse, it will round the value to the nearest whole number.Default valuetrue showGrouping- Type
booleanDescriptionIf
true, displays grouping separators with the value.Default valuetrue suffix- TypeDescription
Optional suffix message to be attached at the end of the value.
tag- Type
stringDescriptionThe HTML tag to use when rendering the outermost element of this component.
Default value'div' value- Type
number | string | { amount: number | string, currency: string }DescriptionValue 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`.
Imperative API
jutro-components offers the formatCurrency function for use with the imperative formatting API.
import { formatCurrency } from '@jutro/components';
This imports a function formatCurrency(intl, props, currencyObject) with the following arguments and return type:
Return value
- Type
stringDescriptionFormatted currency string.
currencyObject- Type
number | string | { amount: number | string, currency: string }DescriptionCurrency value override to be used instead of the one provided with props.
intl- Type
react.intl.IntlDescriptionAn instance of the imperative formatting API access object.
props- Type
CurrencyValue.propTypesDescriptionValid properties for a
CurrencyValueobject.
Hooks
No hooks are available for currency value.
Translation keys
There are no translations for currency value.
For information on how to manage translations, see our section about Internationalization.
Escape hatches
For more information, see our documentation about escape hatches.