Format Byte

Used to format bytes to a human-readable format

File size: 1.45 kB

import { FormatByte, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Text textStyle="lg">
      File size: <FormatByte value={1450.45} />
    </Text>
  )
}

Usage

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

<FormatByte value={1000} />

Examples

Sizes

The format functions works for any size of bytes.

50 byte

5 kB

5 MB

5 GB

import { FormatByte, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Text textStyle="lg">
        <FormatByte value={50} />
      </Text>
      <Text textStyle="lg">
        <FormatByte value={5000} />
      </Text>
      <Text textStyle="lg">
        <FormatByte value={5000000} />
      </Text>
      <Text textStyle="lg">
        <FormatByte value={5000000000} />
      </Text>
    </Stack>
  )
}

Format Bits

Use the unit prop to change the byte format to bits.

File size: 1.45 kb

import { FormatByte, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Text textStyle="lg">
      File size: <FormatByte value={1450.45} unit="bit" />
    </Text>
  )
}

Locale

Wrap the FormatByte component within the LocaleProvider to change the locale.

de-DE

1,45 kB

zh-CN

1.45 kB

import { FormatByte, HStack, LocaleProvider, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Text textStyle="lg">
      <HStack>
        <Text fontWeight="medium">de-DE</Text>
        <LocaleProvider locale="de-DE">
          <FormatByte value={1450.45} />
        </LocaleProvider>
      </HStack>

      <HStack>
        <Text fontWeight="medium">zh-CN</Text>
        <LocaleProvider locale="zh-CN">
          <FormatByte value={1450.45} />
        </LocaleProvider>
      </HStack>
    </Text>
  )
}

Unit Display

Use the unitDisplay prop to change the byte format to compact notation.

50.3kB

50.3 kB

50.3 kilobytes

import { FormatByte, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Text textStyle="lg">
        <FormatByte value={50345.53} unitDisplay="narrow" />
      </Text>
      <Text textStyle="lg">
        <FormatByte value={50345.53} unitDisplay="short" />
      </Text>
      <Text textStyle="lg">
        <FormatByte value={50345.53} unitDisplay="long" />
      </Text>
    </Stack>
  )
}

Props

Prop	Default	Type
`value` *		`number` The byte size to format
`unit`		`'bit' \| 'byte'` The unit granularity to display
`unitDisplay`		`'long' \| 'short' \| 'narrow'` The unit display