Format Number
Formats a number with Intl.NumberFormat — decimal, currency or percent, with optional compact notation (1K / 1M) and fixed precision.
Preview
Section titled “Preview”<nana-format-number type="currency" value="1234.5" currency="USD"></nana-format-number>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/format-number";Basic usage
Section titled “Basic usage”<nana-format-number type="currency" value="1234.5" currency="USD"></nana-format-number>Examples
Section titled “Examples”<nana-format-number value="1234567.891" maximum-fraction-digits="2"></nana-format-number>
<nana-format-number value="1499.99" type="currency" currency="USD"></nana-format-number>
<nana-format-number value="0.4237" type="percent" maximum-fraction-digits="1"></nana-format-number>
<nana-format-number value="1500000" notation="compact"></nana-format-number>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
currency | — | string | 'USD' | ISO 4217 currency code (when `type="currency"`) |
currencyDisplay | currency-display | 'symbol' | 'narrowSymbol' | 'code' | 'name' | 'symbol' | How to display the currency |
grouping | — | boolean | true | Group thousands (off → no separators) |
locale | — | string | undefined | — | BCP 47 locale (defaults to the document locale) |
maximumFractionDigits | maximum-fraction-digits | number | undefined | — | Maximum fraction digits |
minimumFractionDigits | minimum-fraction-digits | number | undefined | — | Minimum fraction digits |
notation | — | 'standard' | 'compact' | 'standard' | `standard` or `compact` (1K, 1M) |
type | — | FormatNumberType | 'decimal' | Formatting style |
value | — | number | 0 | The number to format |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Format Number interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook