Consistent and locale-aware number formatting

Koval ensures consistent number formatting that respects the selected locale. It offers four distinct components for number formatting:

• NumberDecimal: Formats and displays the provided value according to the locale.
• NumberPercent: Formats and displays provided value as a percentage.
• NumberCurrency: Formats and displays provided value as a currency string, appending the specified currency type.
• NumberUnit: Formats and displays provided value, appending the localized unit name.

Each component applies consistent grouping separators based on the selected language standard. This feature is optional and can be disabled using the grouping prop.

Imports & example

import {NumberDecimal, NumberPercent, NumberCurrency, NumberUnit} from 'koval-ui';
 
const Decimal = () => <NumberDecimal value={123.456} />;
 
const Percent = () => <NumberPercent value={0.123} />;
 
const Currency = () => <NumberCurrency value={-123456.789} currency="EUR" />;
 
const Unit = () => <NumberUnit value={123456.789} unit="petabyte" />;

NumberDecimal

The NumberDecimal component is used to format any numeric value. It supports various notations, including scientific and engineering.

Demo

NumberPercent

The NumberPercent component formats the value as a percentage by multiplying it by 100.

Demo

NumberCurrency

The NumberCurrency component displays the value in a conventional currency string format, appending the ISO 4217 currency code, localized name, or symbol. This is particularly useful for displaying financial information.

Demo

NumberUnit

The NumberUnit component is used for displaying numeric information about entities. It appends one of the ECMA standard-supported units (opens in a new tab). The component supports different notations, such as scientific and engineering, and the unit display can be set to short, long, or narrow localized variants.

Demo