Skip to main content

Number value (non-monetary)

Number value (non-monetary) in Storybook

Examples​

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

Basic 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