useFormatByte

useFormatByte is a custom hook for formatting bytes.

Import

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

Copied!

Usage

useFormatByte automatically selects the most appropriate unit (B, KB, MB, GB, TB) based on the byte value size.

useFormatByte internally uses Intl.NumberFormat.

useFormatByte automatically sets the locale based on navigator.language.

Editable example

const kilobyte = useFormatByte(1024)
const megabyte = useFormatByte(1024 * 1024)
const gigabyte = useFormatByte(1024 * 1024 * 1024)
const terabyte = useFormatByte(1024 * 1024 * 1024 * 1024)

return (
  <VStack gap="sm">
    <Text>{kilobyte}</Text>
    <Text>{megabyte}</Text>
    <Text>{gigabyte}</Text>
    <Text>{terabyte}</Text>
  </VStack>
)

Copied!

Changing the Locale

To change the locale, set a value for locale.

Editable example

const enByte = useFormatByte(1024, { locale: "en-US" })
const jaByte = useFormatByte(1024, { locale: "ja-JP" })
const deByte = useFormatByte(1024, { locale: "de-DE" })

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

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

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

Unit Format

To convert units, set unit to either byte or bit. The default is byte.

Editable example

const bytes = useFormatByte(1024, { unit: "byte" })
const bits = useFormatByte(1024, { unit: "bit" })

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

    <Text fontWeight="semibold">Bits</Text>
    <Text>{bits}</Text>
  </Grid>
)

Copied!

Unit Display

To change the unit display, set a value for unitDisplay.

Editable example

const short = useFormatByte(1024, { unitDisplay: "short" })
const narrow = useFormatByte(1024, { unitDisplay: "narrow" })
const long = useFormatByte(1024, { unitDisplay: "long" })

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

    <Text fontWeight="semibold">Narrow</Text>
    <Text>{narrow}</Text>

    <Text fontWeight="semibold">Long</Text>
    <Text>{long}</Text>
  </Grid>
)

Copied!

Edit this page on GitHub

PrevioususeDynamicAnimation NextuseFormatNumber