Format Byte

Used to format byte values with various options and units

File Size

120 kB

Usage

The byte formatting component extends the number formatting capabilities to handle byte-specific formatting, including automatic unit conversion and display options.

import { Format } from '@ark-ui/react'

Examples

Basic

Use the Format.Byte component to format a byte value with default options.

import { Format } from '@ark-ui/react'

export const ByteBasic = () => {
  return (
    <div>
      File size: <Format.Byte value={1450.45} />
    </div>
  )
}

import { Format } from '@ark-ui/solid'

export const ByteBasic = () => {
  return (
    <div>
      File size: <Format.Byte value={1450.45} />
    </div>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'

const value = 1450.45
</script>

<template>
  <div>
    File size:
    <Format.Byte :value="value" />
  </div>
</template>

Sizes

Use the sizes prop to specify custom byte sizes for formatting.

import { Format } from '@ark-ui/react'

export const ByteSizes = () => {
  const byteSizes = [50, 5000, 5000000, 5000000000]

  return (
    <div>
      {byteSizes.map((size, index) => (
        <div key={index}>
          <Format.Byte value={size} />
        </div>
      ))}
    </div>
  )
}

import { For } from 'solid-js'
import { Format } from '@ark-ui/solid'

export const ByteSizes = () => {
  const byteSizes = [50, 5000, 5000000, 5000000000]

  return (
    <div>
      <For each={byteSizes}>
        {(size) => (
          <div>
            <Format.Byte value={size} />
          </div>
        )}
      </For>
    </div>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'

const byteSizes = [50, 5000, 5000000, 5000000000]
</script>

<template>
  <div>
    <div v-for="(size, index) in byteSizes" :key="index">
      <Format.Byte :value="size" />
    </div>
  </div>
</template>

Locale

Use the locale prop to format the byte value according to a specific locale.

import { Format, LocaleProvider } from '@ark-ui/react'

export const ByteWithLocale = () => {
  const locales = ['de-DE', 'zh-CN']
  const value = 1450.45

  return (
    <div>
      {locales.map((locale) => (
        <LocaleProvider key={locale} locale={locale}>
          <Format.Byte value={value} />
        </LocaleProvider>
      ))}
    </div>
  )
}

import { For } from 'solid-js'
import { Format } from '@ark-ui/solid'
import { LocaleProvider } from '@ark-ui/solid'

export const ByteWithLocale = () => {
  const locales = ['de-DE', 'zh-CN']
  const value = 1450.45

  return (
    <div>
      <For each={locales}>
        {(locale) => (
          <LocaleProvider locale={locale}>
            <Format.Byte value={value} />
          </LocaleProvider>
        )}
      </For>
    </div>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'
import { LocaleProvider } from '@ark-ui/vue'

const locales = ['de-DE', 'zh-CN']
const value = 1450.45
</script>

<template>
  <div>
    <LocaleProvider v-for="locale in locales" :key="locale" :locale="locale">
      <Format.Byte :value="value" />
    </LocaleProvider>
  </div>
</template>

Unit

Use the unit prop to specify the unit of the byte value.

import { Format } from '@ark-ui/react'

export const ByteWithUnit = () => {
  const value = 1450.45
  const unit = 'bit'

  return (
    <div>
      File size: <Format.Byte value={value} unit={unit} />
    </div>
  )
}

import { Format } from '@ark-ui/solid'

export const ByteWithUnit = () => {
  const value = 1450.45
  const unit = 'bit'

  return (
    <div>
      File size: <Format.Byte value={value} unit={unit} />
    </div>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'

const value = 1450.45
const unit = 'bit'
</script>

<template>
  <div>
    File size:
    <Format.Byte :value="value" :unit="unit" />
  </div>
</template>

Unit Display

Use the unitDisplay prop to specify the display of the unit.

import { Format } from '@ark-ui/react'

export const ByteWithUnitDisplay = () => {
  const value = 50345.53
  const unitDisplays = ['narrow', 'short', 'long'] as const

  return (
    <div>
      {unitDisplays.map((unitDisplay) => (
        <Format.Byte key={unitDisplay} value={value} unitDisplay={unitDisplay} />
      ))}
    </div>
  )
}

import { For } from 'solid-js'
import { Format } from '@ark-ui/solid'

export const ByteWithUnitDisplay = () => {
  const value = 50345.53
  const unitDisplays = ['narrow', 'short', 'long'] as const

  return (
    <div>
      <For each={unitDisplays}>
        {(unitDisplay) => <Format.Byte value={value} unitDisplay={unitDisplay} />}
      </For>
    </div>
  )
}

<script setup lang="ts">
import { Format } from '@ark-ui/vue'

const value = 50345.53
const unitDisplays = ['narrow', 'short', 'long'] as const
</script>

<template>
  <div>
    <Format.Byte
      v-for="unitDisplay in unitDisplays"
      :key="unitDisplay"
      :value="value"
      :unit-display="unitDisplay"
    />
  </div>
</template>