Format Number

Formats a number value with automatic unit conversion and display options.

Usage

The number formatting logic is handled by the native Intl.NumberFormat API and smartly cached to avoid performance issues when using the same locale and options.

import { Format } from '@cerberus/react'

Examples

Basic

Use the Format.Number component to format a number with default options.

1,450.45

'use client'

import { Format } from '@cerberus/react'

export const NumberBasic = () => {
  return <Format.Number value={1450.45} />
}

Percentage

Use the style="percent" prop to format the number as a percentage.

'use client'

import { Format } from '@cerberus/react'

export const NumberWithPercentage = () => {
  return <Format.Number value={0.145} style="percent" maximumFractionDigits={2} minimumFractionDigits={2} />
}

Currency

Use the style="currency" prop along with the currency prop to format the number as a currency.

'use client'

import { Format } from '@cerberus/react'

export const NumberWithCurrency = () => {
  return <Format.Number value={1234.45} style="currency" currency="USD" />
}

Locale

Use the locale prop to format the number according to a specific locale.

'use client'

import { Format, LocaleProvider } from '@cerberus/react'

export const NumberWithLocale = () => {
  return (
    <LocaleProvider locale="de-DE">
      <Format.Number value={1450.45} />
    </LocaleProvider>
  )
}

Unit

Use the style="unit" prop along with the unit prop to format the number with a specific unit.

'use client'

import { Format } from '@cerberus/react'

export const NumberWithUnit = () => {
  return <Format.Number value={384.4} style="unit" unit="kilometer" />
}

Compact Notation

Use the notation="compact" prop to format the number in compact notation.

'use client'

import { Format } from '@cerberus/react'

export const NumberWithCompact = () => {
  return <Format.Number value={1500000} notation="compact" compactDisplay="short" />
}

On this page

Edit this page on Github