Number value (non-monetary)

Number value (non-monetary) in Storybook

The NumberValue component supports two formats: decimal or percentage. decimal is the default.

Notes

prefix, suffix props

Use prefix and suffix props with caution.

Usage will produce what are essentially concatenated strings, like:

"Some prefix string " + someNumberValue + " some suffix string"

This is not localization friendly.

Better practice would be to use a formatted message. See the 'Internationalization and Localization' section of the Reference documentation.

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 formatNumber API.

formatNumber(intl, props, number), where:

• @param {import('react-intl').Intl} intl - instance of the imperative formatting API access object
• @param {PropTypes.InferProps<FormattedNumber.propTypes>} props - FormattedNumber props
• @param {number} [number] - Numeric value override to be used instead of the one provided with props
• @returns {string} - Formatted number string

Examples

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