useFormatNumber
useFormatNumberは、数値をフォーマットするカスタムフックです。
1,234,567.89
const formattedValue = useFormatNumber(1234567.89)
return <Text>{formattedValue}</Text>
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { useFormatNumber } from "@yamada-ui/react"
import { useFormatNumber } from "@/components/ui"
import { useFormatNumber } from "@workspaces/ui"
const formattedValue = useFormatNumber(1234567.89)
指定されたロケールとオプションに従って数値をフォーマットします。フックはフォーマットされた値を直接返します。
useFormatNumberは、内部でIntl.NumberFormatを使用しています。ロケールを変更する
ロケールを変更する場合は、localeに値を設定します。
英語
1,234,567.89
日本語
1,234,567.89
ドイツ語
1.234.567,89
フランス語
1 234 567,89
中国語
1,234,567.89
const enValue = useFormatNumber(1234567.89, { locale: "en-US" })
const jaValue = useFormatNumber(1234567.89, { locale: "ja-JP" })
const deValue = useFormatNumber(1234567.89, { locale: "de-DE" })
const frValue = useFormatNumber(1234567.89, { locale: "fr-FR" })
const zhValue = useFormatNumber(1234567.89, { locale: "zh-CN" })
return (
<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">英語</Text>
<Text>{enValue}</Text>
<Text fontWeight="semibold">日本語</Text>
<Text>{jaValue}</Text>
<Text fontWeight="semibold">ドイツ語</Text>
<Text>{deValue}</Text>
<Text fontWeight="semibold">フランス語</Text>
<Text>{frValue}</Text>
<Text fontWeight="semibold">中国語</Text>
<Text>{zhValue}</Text>
</Grid>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。プロジェクト全体のロケールを設定する
アプリケーション全体のロケールの設定をする場合は、UIProviderのlocaleに値を設定します。
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<UIProvider locale="ja-JP">
<YourComponent />
</UIProvider>
)
}
通貨に変換する
通貨に変換する場合は、styleに"currency"を設定します。
米ドル
$1,234,567.89
ユーロ
1.234.567,89 €
円
￥1,234,568
const usdValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "USD",
locale: "en-US",
})
const eurValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "EUR",
locale: "de-DE",
})
const jpyValue = useFormatNumber(1234567.89, {
style: "currency",
currency: "JPY",
locale: "ja-JP",
})
return (
<Grid templateColumns="auto 1fr" gap="sm">
<Text fontWeight="semibold">米ドル</Text>
<Text>{usdValue}</Text>
<Text fontWeight="semibold">ユーロ</Text>
<Text>{eurValue}</Text>
<Text fontWeight="semibold">円</Text>
<Text>{jpyValue}</Text>
</Grid>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。単位に変換する
単位に変換する場合は、styleに"unit"を設定します。
100 kg
摂氏 100 度
100km/h
const kilogramValue = useFormatNumber(100, {
style: "unit",
unit: "kilogram",
})
const celsiusValue = useFormatNumber(100, {
style: "unit",
unit: "celsius",
unitDisplay: "long",
})
const speedValue = useFormatNumber(100, {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow",
})
return (
<VStack gap="sm">
<Text>{kilogramValue}</Text>
<Text>{celsiusValue}</Text>
<Text>{speedValue}</Text>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。パーセントに変換する
パーセントに変換する場合は、styleに"percent"を設定します。
45%
45.00%
const percent1Value = useFormatNumber(0.45, { style: "percent" })
const percent2Value = useFormatNumber(0.45, {
style: "percent",
minimumFractionDigits: 2,
})
return (
<VStack gap="sm">
<Text>{percent1Value}</Text>
<Text>{percent2Value}</Text>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。表記に変換する
表記に変換する場合は、notationに値を設定します。
1,234,567.89
1.235E6
1.235E6
123万
const standardValue = useFormatNumber(1234567.89, { notation: "standard" })
const scientificValue = useFormatNumber(1234567.89, { notation: "scientific" })
const engineeringValue = useFormatNumber(1234567.89, {
notation: "engineering",
})
const compactValue = useFormatNumber(1234567.89, { notation: "compact" })
return (
<VStack gap="sm">
<Text>{standardValue}</Text>
<Text>{scientificValue}</Text>
<Text>{engineeringValue}</Text>
<Text>{compactValue}</Text>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。小数点以下の桁数を制御する
小数点以下の桁数を制御する場合は、minimumFractionDigitsとmaximumFractionDigitsを使用します。
1,234.50
1,234.567
1,234.0000
const fixed2Value = useFormatNumber(1234.5, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
const range03Value = useFormatNumber(1234.567, {
minimumFractionDigits: 0,
maximumFractionDigits: 3,
})
const fixed4Value = useFormatNumber(1234, {
minimumFractionDigits: 4,
maximumFractionDigits: 4,
})
return (
<VStack gap="sm">
<Text>{fixed2Value}</Text>
<Text>{range03Value}</Text>
<Text>{fixed4Value}</Text>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。グループ化を無効にする
グループ化を無効にする場合は、useGroupingをfalseに設定します。
1234567.89
const noGroupingValue = useFormatNumber(1234567.89, { useGrouping: false })
return <Text>{noGroupingValue}</Text>
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。符号の表示を変更する
符号の表示を変更する場合は、signDisplayに値を設定します。
+1,234.5
-1,234.5
const alwaysValue = useFormatNumber(1234.5, { signDisplay: "always" })
const exceptZeroValue = useFormatNumber(-1234.5, { signDisplay: "exceptZero" })
return (
<VStack gap="sm">
<Text>{alwaysValue}</Text>
<Text>{exceptZeroValue}</Text>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。