useFormatByte

useFormatByte is a custom hook for formatting bytes.

1.02 kB

1.05 MB

1.07 GB

1.1 TB

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

return (
  <>
    <Text>{kilobyte}</Text>
    <Text>{megabyte}</Text>
    <Text>{gigabyte}</Text>
    <Text>{terabyte}</Text>
  </>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

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

import { useFormatByte } from "@/components/ui"

import { useFormatByte } from "@workspaces/ui"

const kilobyte = useFormatByte(1024)

FormatByte automatically selects the most appropriate unit (byte, kB, MB, GB, TB) based on the byte value size.

useFormatByte internally uses Intl.NumberFormat.

Changing the Locale

To change the locale, set a value for locale.

en-US

1.02 kB

ja-JP

1.02 KB

de-DE

1,02 kB

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>
)

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">
      <FormatByte value={1024} />
    </UIProvider>
  )
}

Unit Format

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

Bytes

1.02 kB

Bits

1.02 kb

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>
)

If you use this code, you need to add "use client" to the top of the file.

Unit Display

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

Short

1.02 kB

Narrow

1.02kB

Long

1.02 kilobytes

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>
)

If you use this code, you need to add "use client" to the top of the file.