Format Bytes

<p-format-bytes> | PFormatBytes

Since 1.0

stable

Formats a number as a human readable bytes value.

The file is in size.

<div class="format-bytes-overview">
  The file is <p-format-bytes value="1000"></p-format-bytes> in size. <br /><br />
  <p-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></p-input>
</div>

<script>
  const container = document.querySelector('.format-bytes-overview');
  const formatter = container.querySelector('p-format-bytes');
  const input = container.querySelector('p-input');

  input.addEventListener('p-input', () => (formatter.value = input.value || 0));
</script>

import { useState } from 'react';
import PButton from 'pure-uikit/dist/react/button';
import PFormatBytes from 'pure-uikit/dist/react/format-bytes';
import PInput from 'pure-uikit/dist/react/input';

const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
      The file is <PFormatBytes value={value} /> in size.
      <br />
      <br />
      <PInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
        onPInput={event => setValue(event.target.value)}
      />
    </>
  );
};

Examples

Formatting Bytes

Set the value attribute to a number to get the value in bytes.

<p-format-bytes value="12"></p-format-bytes><br />
<p-format-bytes value="1200"></p-format-bytes><br />
<p-format-bytes value="1200000"></p-format-bytes><br />
<p-format-bytes value="1200000000"></p-format-bytes>

import PFormatBytes from 'pure-uikit/dist/react/format-bytes';

const App = () => (
  <>
    <PFormatBytes value="12" />
    <br />
    <PFormatBytes value="1200" />
    <br />
    <PFormatBytes value="1200000" />
    <br />
    <PFormatBytes value="1200000000" />
  </>
);

Formatting Bits

To get the value in bits, set the unit attribute to bit.

<p-format-bytes value="12" unit="bit"></p-format-bytes><br />
<p-format-bytes value="1200" unit="bit"></p-format-bytes><br />
<p-format-bytes value="1200000" unit="bit"></p-format-bytes><br />
<p-format-bytes value="1200000000" unit="bit"></p-format-bytes>

import PFormatBytes from 'pure-uikit/dist/react/format-bytes';

const App = () => (
  <>
    <PFormatBytes value="12" unit="bit" />
    <br />
    <PFormatBytes value="1200" unit="bit" />
    <br />
    <PFormatBytes value="1200000" unit="bit" />
    <br />
    <PFormatBytes value="1200000000" unit="bit" />
  </>
);

Localization

Use the lang attribute to set the number formatting locale.

<p-format-bytes value="12" lang="de"></p-format-bytes><br />
<p-format-bytes value="1200" lang="de"></p-format-bytes><br />
<p-format-bytes value="1200000" lang="de"></p-format-bytes><br />
<p-format-bytes value="1200000000" lang="de"></p-format-bytes>

import PFormatBytes from 'pure-uikit/dist/react/format-bytes';

const App = () => (
  <>
    <PFormatBytes value="12" lang="de" />
    <br />
    <PFormatBytes value="1200" lang="de" />
    <br />
    <PFormatBytes value="1200000" lang="de" />
    <br />
    <PFormatBytes value="1200000000" lang="de" />
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-bytes/format-bytes.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-bytes/format-bytes.js';

To import this component using a bundler:

import 'pure-uikit/dist/components/format-bytes/format-bytes.js';

To import this component as a React component:

import PFormatBytes from 'pure-uikit/dist/react/format-bytes';

Properties

Name	Description	Type	Default
`value`	The number to format in bytes.	`number`	`0`
`unit`	The type of unit to display.	`"byte" \| "bit"`	`"byte"`
`display`	Determines how to display the result, e.g. “100 bytes”, “100 b”, or “100b”.	`"long" \| "short" \| "narrow"`	`"short"`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.