Format Bytes

<mo-format-bytes> | MOFormatBytes

Since 1.0

stable

Formats a number as a human-readable byte size.

The file is in size.

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

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

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

import { useState } from 'react';
import { MOButton, MOFormatBytes, MOInput } from '@metsooutotec/modes-web-components/dist/react';

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

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

Examples

Formatting bytes

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

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

import { MOFormatBytes } from '@metsooutotec/modes-web-components/dist/react';

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

Formatting bits

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

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

import { MOFormatBytes } from '@metsooutotec/modes-web-components/dist/react';

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

Localization

Use the lang attribute to set the number formatting locale.

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

import { MOFormatBytes } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOFormatBytes value="12" lang="de" />
    <br />
    <MOFormatBytes value="1200" lang="de" />
    <br />
    <MOFormatBytes value="1200000" lang="de" />
    <br />
    <MOFormatBytes 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.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/format-bytes/format-bytes.js';

To import this component as a React component:

import MOFormatBytes from '@metsooutotec/modes-web-components/dist/react/format-bytes/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/format-bytes/format-bytes.js"></script>

Properties

Name	Description	Type	Default
`value`	The number to format in bytes.	`number`	`0`
`unit`	The 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'`
`lang`	The locale to use when formatting the number.	`string`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.