DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerContainer QueryDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTA ModalDate PickerDialogFieldFieldsetFile UploaderIconButtonInputLoading StatesMarqueeMenuNotificationsNumber InputPaginationPin InputPopoverProgress IndicatorsPrompt ModalRadioRatingSelectSliderSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFormat Relative TimeFrameHighlightJSON Tree ViewLocalePortalPresenceShowSwapsplitPropsTheme

Format Number

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

  • npm
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Import

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'

Usage

Basic

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

Loading example...

Percentage

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

Loading example...

Currency

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

Loading example...

Locale

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

Loading example...

Unit

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

Loading example...

Compact Notation

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

Loading example...

On this page

  • Import
  • Usage
    • Basic
    • Percentage
    • Currency
    • Locale
    • Unit
    • Compact Notation
Edit this page on Github
1,450.45
14.50%
$1,234.45
1,45 kB1.45 kB
File size: 1.45 kb
1.5M