useFormatNumber

useFormatNumber is a custom hook for formatting numbers.

Import

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

Copied!

Usage

useFormatNumber internally uses Intl.NumberFormat.

useFormatNumber automatically sets the locale based on navigator.language.

Editable example

const value = useFormatNumber(1234567.89)

return <Text>{value}</Text>

Copied!

Changing the Locale

To change the locale, set a value for locale.

Editable example

const enValue = useFormatNumber(1234567.89, { locale: "en-US" })
const jaValue = useFormatNumber(1234567.89, { locale: "ja-JP" })
const deValue = useFormatNumber(1234567.89, { locale: "de-DE" })

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">en-US</Text>
    <Text>{enValue}</Text>

    <Text fontWeight="semibold">ja-JP</Text>
    <Text>{jaValue}</Text>

    <Text fontWeight="semibold">de-DE</Text>
    <Text>{deValue}</Text>
  </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.

Currency Format

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

Editable example

const usd = useFormatNumber(1234567.89, {
  style: "currency",
  currency: "USD",
})
const eur = useFormatNumber(1234567.89, {
  style: "currency",
  currency: "EUR",
  currencyDisplay: "name",
  locale: "de-DE",
})
const jpy = useFormatNumber(1234567.89, {
  style: "currency",
  currency: "JPY",
  currencySign: "accounting",
  locale: "ja-JP",
})

return (
  <Grid templateColumns="auto 1fr" gap="sm">
    <Text fontWeight="semibold">USD</Text>
    <Text>{usd}</Text>

    <Text fontWeight="semibold">EUR</Text>
    <Text>{eur}</Text>

    <Text fontWeight="semibold">JPY</Text>
    <Text>{jpy}</Text>
  </Grid>
)

Copied!

Unit Format

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

Editable example

const kg = useFormatNumber(100, { style: "unit", unit: "kilogram" })
const celsius = useFormatNumber(100, {
  style: "unit",
  unit: "celsius",
  unitDisplay: "long",
})
const speed = useFormatNumber(100, {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow",
})

return (
  <VStack gap="sm">
    <Text>{kg}</Text>
    <Text>{celsius}</Text>
    <Text>{speed}</Text>
  </VStack>
)

Copied!

Percentage Format

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

Editable example

const percent = useFormatNumber(0.45, { style: "percent" })
const percentWithDecimals = useFormatNumber(0.45, {
  style: "percent",
  minimumFractionDigits: 2,
})

return (
  <VStack gap="sm">
    <Text>{percent}</Text>
    <Text>{percentWithDecimals}</Text>
  </VStack>
)

Copied!

Notation Format

To convert notation, set a value for notation.

Editable example

const standard = useFormatNumber(1234567.89, { notation: "standard" })
const scientific = useFormatNumber(1234567.89, { notation: "scientific" })
const engineering = useFormatNumber(1234567.89, { notation: "engineering" })
const compact = useFormatNumber(1234567.89, { notation: "compact" })

return (
  <VStack gap="sm">
    <Text>{standard}</Text>
    <Text>{scientific}</Text>
    <Text>{engineering}</Text>
    <Text>{compact}</Text>
  </VStack>
)

Copied!

Edit this page on GitHub

PrevioususeFormatByte NextuseHover