FormatNumber

FormatNumber is used to format numbers to a specific locale and options.

Import

import { FormatNumber } from "@yamada-ui/react"

Copied!

Usage

FormatNumber internally uses Intl.NumberFormat.

FormatNumber automatically sets the locale based on navigator.language.

Editable example

<FormatNumber value={1234567.89} />

Copied!

Changing the Locale

To change the locale, set a value for locale.

Editable example

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">en-US</Text>
  <FormatNumber value={1234567.89} locale="en-US" />

  <Text fontWeight="semibold">ja-JP</Text>
  <FormatNumber value={1234567.89} locale="ja-JP" />

  <Text fontWeight="semibold">de-DE</Text>
  <FormatNumber value={1234567.89} locale="de-DE" />

  <Text fontWeight="semibold">fr-FR</Text>
  <FormatNumber value={1234567.89} locale="fr-FR" />

  <Text fontWeight="semibold">zh-CN</Text>
  <FormatNumber value={1234567.89} locale="zh-CN" />
</Grid>

Copied!

Customize from Config

If you want to set the locale for the entire application, customize the config.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const customConfig = extendConfig({
  locale: "ja-JP",
})

const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}

Copied!

If you want to learn more about config, please check Customizing Config.

Converting to Currency

To convert to currency, set "currency" for style.

Editable example

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">USD</Text>
  <FormatNumber value={1234567.89} style="currency" currency="USD" />

  <Text fontWeight="semibold">EUR</Text>
  <FormatNumber
    value={1234567.89}
    style="currency"
    currency="EUR"
    currencyDisplay="name"
    locale="de-DE"
  />

  <Text fontWeight="semibold">JPY</Text>
  <FormatNumber
    value={1234567.89}
    style="currency"
    currency="JPY"
    currencySign="accounting"
    locale="ja-JP"
  />
</Grid>

Copied!

Converting to Units

To convert to units, set "unit" for style.

Editable example

<VStack gap="sm">
  <FormatNumber value={100} style="unit" unit="kilogram" />
  <FormatNumber value={100} style="unit" unit="celsius" unitDisplay="long" />
  <FormatNumber
    value={100}
    style="unit"
    unit="kilometer-per-hour"
    unitDisplay="narrow"
  />
</VStack>

Copied!

Converting to Percent

To convert to percent, set "percent" for style.

Editable example

<VStack gap="sm">
  <FormatNumber value={0.45} style="percent" />
  <FormatNumber value={0.45} style="percent" minimumFractionDigits={2} />
</VStack>

Copied!

Converting Notation

To convert notation, set a value for notation.

Editable example

<VStack gap="sm">
  <FormatNumber value={1234567.89} notation="standard" />
  <FormatNumber value={1234567.89} notation="scientific" />
  <FormatNumber value={1234567.89} notation="engineering" />
  <FormatNumber value={1234567.89} notation="compact" />
</VStack>

Copied!

Controlling Decimal Places

To control the number of decimal places, use minimumFractionDigits and maximumFractionDigits.

Editable example

<VStack gap="sm">
  <FormatNumber
    value={1234.5678}
    minimumFractionDigits={2}
    maximumFractionDigits={2}
  />
  <FormatNumber
    value={1234.5678}
    minimumFractionDigits={1}
    maximumFractionDigits={4}
  />
</VStack>

Copied!

Disabling Grouping

To disable grouping, set false for useGrouping.

Editable example

<FormatNumber value={1234567.89} useGrouping={false} />

Copied!

Changing the Sign Display

To change the sign display, set a value for signDisplay.

Editable example

<VStack gap="sm">
  <FormatNumber value={1234.5} signDisplay="always" />
  <FormatNumber value={-1234.5} signDisplay="exceptZero" />
</VStack>

Copied!

Edit this page on GitHub

PreviousFormatByte NextRipple