useFormatNumber
useFormatNumber is a custom hook for formatting numbers.
1,234,567.89
const formattedValue = useFormatNumber(1234567.89)
return <Text>{formattedValue}</Text>
If you use this code, you need to add
"use client" to the top of the file.Usage
import { useFormatNumber } from "@yamada-ui/react"
import { useFormatNumber } from "@/components/ui"
import { useFormatNumber } from "@workspaces/ui"
const formattedValue = useFormatNumber(1234567.89)
It formats numbers according to the specified locale and options. The hook returns the formatted value directly.
useFormatNumber internally uses Intl.NumberFormat.Changing the Locale
To change the locale, set a value for locale.
en-US
1,234,567.89
ja-JP
1,234,567.89
de-DE
1.234.567,89
fr-FR
1 234 567,89
zh-CN
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">en-US</Text>
<Text>{enValue}</Text>
<Text fontWeight="semibold">ja-JP</Text>
<Text>{jaValue}</Text>
<Text fontWeight="semibold">de-DE</Text>
<Text>{deValue}</Text>
<Text fontWeight="semibold">fr-FR</Text>
<Text>{frValue}</Text>
<Text fontWeight="semibold">zh-CN</Text>
<Text>{zhValue}</Text>
</Grid>
)
If you use this code, you need to add
"use client" to the top of the file.Set the Locale for the Entire Application
If you want to set the locale for the entire application, set the locale for the UIProvider.
import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<UIProvider locale="en-US">
<YourComponent />
</UIProvider>
)
}
Converting to Currency
To convert to currency, set "currency" for style.
USD
$1,234,567.89
EUR
1.234.567,89 €
JPY
ï¿¥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">USD</Text>
<Text>{usdValue}</Text>
<Text fontWeight="semibold">EUR</Text>
<Text>{eurValue}</Text>
<Text fontWeight="semibold">JPY</Text>
<Text>{jpyValue}</Text>
</Grid>
)
If you use this code, you need to add
"use client" to the top of the file.Converting to Units
To convert to units, set "unit" for style.
100 kg
100 degrees Celsius
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>
)
If you use this code, you need to add
"use client" to the top of the file.Converting to Percent
To convert to percent, set "percent" for style.
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>
)
If you use this code, you need to add
"use client" to the top of the file.Converting Notation
To convert notation, set a value for notation.
1,234,567.89
1.235E6
1.235E6
1.2M
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>
)
If you use this code, you need to add
"use client" to the top of the file.Controlling Decimal Places
To control the number of decimal places, use minimumFractionDigits and 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>
)
If you use this code, you need to add
"use client" to the top of the file.Disabling Grouping
To disable grouping, set false for useGrouping.
1234567.89
const noGroupingValue = useFormatNumber(1234567.89, { useGrouping: false })
return <Text>{noGroupingValue}</Text>
If you use this code, you need to add
"use client" to the top of the file.Changing the Sign Display
To change the sign display, set a value for 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>
)
If you use this code, you need to add
"use client" to the top of the file.