useFormatNumber

useFormatNumberは、数値をフォーマットするカスタムフックです。

インポート

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

Copied!

使い方

useFormatNumberは、内部的にIntl.NumberFormatを使用しています。

useFormatNumberは、navigator.languageに基づいてlocaleを自動的に設定します。

編集可能な例

const value = useFormatNumber(1234567.89)

return <Text>{value}</Text>

Copied!

ロケールの変更する

ロケールを変更する場合は、localeに値を設定します。

編集可能な例

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!

コンフィグからカスタマイズする

アプリケーション全体のロケールの設定をしたい場合は、コンフィグをカスタマイズします。

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

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

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

Copied!

コンフィグをもっと学びたい場合は、コンフィグをカスタマイズするをご覧ください。

通貨に変換する

通貨に変換する場合は、styleに"currency"を設定します。

編集可能な例

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!

単位に変換する

単位に変換する場合は、styleに"unit"を設定します。

編集可能な例

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!

パーセントに変換する

パーセントに変換する場合は、styleに"percent"を設定します。

編集可能な例

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に値を設定します。

編集可能な例

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!

GitHubでこのページを編集する

前useFormatByte 次useHover