FormatByte

FormatByte is used to format bytes to a human-readable format.

Import

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

Copied!

Usage

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

FormatByte internally uses Intl.NumberFormat.

FormatByte automatically sets the locale based on navigator.language.

Editable example

<VStack gap="sm">
  <FormatByte value={1024} />
  <FormatByte value={1024 * 1024} />
  <FormatByte value={1024 * 1024 * 1024} />
  <FormatByte value={1024 * 1024 * 1024 * 1024} />
</VStack>

Copied!

Changing the Locale

To change the locale, set a value for locale.

Editable example

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">en-US</Text>
  <FormatByte value={1024} locale="en-US" />

  <Text fontWeight="semibold">ja-JP</Text>
  <FormatByte value={1024} locale="ja-JP" />

  <Text fontWeight="semibold">de-DE</Text>
  <FormatByte value={1024} locale="de-DE" />

  <Text fontWeight="semibold">fr-FR</Text>
  <FormatByte value={1024} locale="fr-FR" />

  <Text fontWeight="semibold">zh-CN</Text>
  <FormatByte value={1024} locale="zh-CN" />
</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

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">Bytes</Text>
  <FormatByte value={1024} unit="byte" />

  <Text fontWeight="semibold">Bits</Text>
  <FormatByte value={1024} unit="bit" />
</Grid>

Copied!

Changing the Unit Display

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

Editable example

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">Short</Text>
  <FormatByte value={1024} unitDisplay="short" />

  <Text fontWeight="semibold">Narrow</Text>
  <FormatByte value={1024} unitDisplay="narrow" />

  <Text fontWeight="semibold">Long</Text>
  <FormatByte value={1024} unitDisplay="long" />
</Grid>

Copied!

Edit this page on GitHub

PreviousVisuallyHidden NextFormatNumber