Number value (non-monetary)
Usage
This is a utility component for rendering and formatting data, so there are no specific UX guidelines.
Code
<NumberValue value={123456} />
Import statement
import { NumberValue } 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.
className- Type
stringDescriptionCSS class name for this component.
format- Type
'decimal' | 'percent'DescriptionThe format to display the number in.
Default value'decimal' maximumFractionDigits- Type
numberDescriptionMaximum number of fraction digits.
Default value3 minimumFractionDigits- Type
numberDescriptionMinimum number of fraction digits.
Default value0 path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
placeholder- TypeDescription
The string to display in the UI if 'value' is 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 value. showGrouping- Type
booleanDescriptionIf
true, displays grouping separators with the value.Default valuetrue suffix- TypeDescription
Optional suffix message to be attached at the end the value.
tag- Type
stringDescriptionThe HTML tag to use when rendering the outermost element of this component.
Default value'div' value- Type
numberDescriptionThe numeric value to display.
Imperative API
jutro-components offers the formatNumber function for use with the imperative formatting API.
import { formatNumber } from '@jutro/components';
This imports a function formatNumber(intl, props, number) with the following arguments and return type:
Return value
- Type
stringDescriptionFormatted number string.
intl- Type
react.intl.IntlDescriptionAn instance of the imperative formatting API access object.
number- Type
numberDescriptionNumeric value override to be used instead of the one provided with props.
props- Type
NumberValue.propTypesDescriptionValid properties for a
NumberValueobject.
Hooks
No hooks are available for number value.
Translation keys
There are no translations for number value.
For information on how to manage translations, see our section about Internationalization.
Escape hatches
For more information, see our documentation about escape hatches.
Examples
Check out the Usage section for details about how to design a number value properly, and the different configuration options we provide.
Basic number value example
You can use the NumberValue component to render a number.
<NumberValue value={123456} />
Percentage example
You can use the format property to render the number as a percentage instead.
<NumberValue
value={0.25}
format="percent"
/>
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.
<NumberValue
value={1234.5}
showFractions={false}
/>
Imperative API example
jutro-components offers the formatNumber function for use with the imperative formatting API.
import { formatNumber } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const n1 = formatNumber(intl, { value: 1232.23, format: 'decimal' });
const n2 = formatNumber(intl, { value: 1, format: 'percent' });
const n3 = formatNumber(intl, { value: 1231232.23434, format: 'decimal', showFractions: true, maximumFractionDigits: 4 });
const n4 = formatNumber(intl, { format: 'decimal', showFractions: true }, 1.2345);
// en-US output:
1,232
100%
1,231,232.2343
1.235
// fr-FR output
1 232
100 %
1 231 232,2343
1,235