Light Dark System

Format Bytes

<sc-format-bytes> | ScFormatBytes
Since 2.0 stable

Formats a number as a human readable bytes value.

The file is in size. 

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

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

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

import { useState } from 'react';
import ScButton from '@styledc-dev/styledc/dist/react/button';
import ScFormatBytes from '@styledc-dev/styledc/dist/react/format-bytes';
import ScInput from '@styledc-dev/styledc/dist/react/input';

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

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

Examples

Formatting Bytes

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




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

import ScFormatBytes from '@styledc-dev/styledc/dist/react/format-bytes';

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

Formatting Bits

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




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

import ScFormatBytes from '@styledc-dev/styledc/dist/react/format-bytes';

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

Localization

Use the lang attribute to set the number formatting locale.




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

import ScFormatBytes from '@styledc-dev/styledc/dist/react/format-bytes';

const App = () => (
  <>
    <ScFormatBytes value="12" lang="de" />
    <br />
    <ScFormatBytes value="1200" lang="de" />
    <br />
    <ScFormatBytes value="1200000" lang="de" />
    <br />
    <ScFormatBytes 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/@styledc-dev/styledc@1.0.0/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/@styledc-dev/styledc@1.0.0/cdn/components/format-bytes/format-bytes.js';

To import this component using a bundler:

import '@styledc-dev/styledc/dist/components/format-bytes/format-bytes.js';

To import this component as a React component:

import ScFormatBytes from '@styledc-dev/styledc/dist/react/format-bytes';

Properties

Name Description Reflects 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.