1,450.45
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberBasic = () => {
return (
<Text textStyle="lg">
<FormatNumber value={1450.45} />
</Text>
)
}
Usage
The number formatting logic is handled by the native Intl.NumberFormat API and
smartly cached to avoid performance issues when using the same locale and
options.
import { FormatNumber } from "@chakra-ui/react"<FormatNumber value={1000} />Examples
Percentage
Use the style=percentage prop to change the number format to percentage.
14.50%
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithPercentage = () => {
return (
<Text textStyle="lg">
<FormatNumber
value={0.145}
style="percent"
maximumFractionDigits={2}
minimumFractionDigits={2}
/>
</Text>
)
}
Currency
Use the style=currency prop to change the number format to currency.
$1,234.45
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithCurrency = () => {
return (
<Text textStyle="lg">
<FormatNumber value={1234.45} style="currency" currency="USD" />
</Text>
)
}
Locale
Wrap the FormatNumber component within the LocaleProvider to change the
locale.
de-DE
1.450,45zh-CN
1,450.45import { FormatNumber, HStack, LocaleProvider, Text } from "@chakra-ui/react"
export const FormatNumberWithLocale = () => {
return (
<Text textStyle="lg">
<HStack>
<Text fontWeight="medium">de-DE</Text>
<LocaleProvider locale="de-DE">
<FormatNumber value={1450.45} />
</LocaleProvider>
</HStack>
<HStack>
<Text fontWeight="medium">zh-CN</Text>
<LocaleProvider locale="zh-CN">
<FormatNumber value={1450.45} />
</LocaleProvider>
</HStack>
</Text>
)
}
Unit
Use the style=unit prop to change the number format to unit.
384.4 km
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithUnit = () => {
return (
<Text textStyle="lg">
<FormatNumber value={384.4} style="unit" unit="kilometer" />
</Text>
)
}
Compact Notation
Use the notation=compact prop to change the number format to compact notation.
1.5M
import { FormatNumber, Text } from "@chakra-ui/react"
export const FormatNumberWithCompact = () => {
return (
<Text textStyle="lg">
<FormatNumber value={1500000} notation="compact" compactDisplay="short" />
</Text>
)
}
Props
The FormatNumber component supports all Intl.NumberFormat options in
addition to the following props:
| Prop | Default | Type |
|---|---|---|
value * | numberThe number to format |