Number / Byte Format

Locale-aware number (uses the nearest LocaleProvider): currency, percent, compact, units…

Import

import { FormatNumber } from '@marbleui/ui'

Props

<FormatNumber>

Prop	Type	Default	Description
value *required	`number`	`—`
className	`string`	`—`

Also accepts HTML element props (17).

Usage notes

Locale-aware number display: currency, percent, compact, units. For editable numbers use NumberField. The component is exported as FormatNumber.

<FormatNumber value={1234567.891} style="currency" currency="USD" />
<FormatNumber value={0.1834} style="percent" maximumFractionDigits={1} />

It accepts the standard Intl.NumberFormat options as props (style, currency, notation, unit, signDisplay, maximumFractionDigits…).
It uses the nearest LocaleProvider locale and renders a span with tabular numerals.
useNumberFormatter is also exported for formatting outside JSX, e.g. in an aria-label.

Example source · show

import { LocaleProvider } from '../locale-provider'
import { FormatNumber } from './number-format'

const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="flex justify-between gap-8 border-b border-border py-2 text-sm last:border-0"><span className="text-fg-muted">{label}</span><span className="font-medium text-fg">{children}</span></div>
)

const Table = () => (
  <div className="w-80">
    <Row label="Currency"><FormatNumber value={1234567.891} style="currency" currency="USD" /></Row>
    <Row label="Compact"><FormatNumber value={1234567} notation="compact" /></Row>
    <Row label="Percent"><FormatNumber value={0.1834} style="percent" maximumFractionDigits={1} /></Row>
    <Row label="Unit"><FormatNumber value={42} style="unit" unit="kilometer-per-hour" /></Row>
    <Row label="Signed"><FormatNumber value={-3.2} signDisplay="always" maximumFractionDigits={1} /></Row>
  </div>
)

export const styles = {
  'en-US': Table,
  'de-DE': () => <LocaleProvider locale="de-DE"><Table /></LocaleProvider>,
  'hi-IN': () => <LocaleProvider locale="hi-IN"><Table /></LocaleProvider>,
}

Source: packages/ui/src/number-format/number-format.tsx

Catalog