Data Size

The Data Size component is designed to display data sizes in a human-readable format. Leveraging the human-format library, it simplifies the representation of byte values into more understandable formats such as bytes (B), kilobytes (KiB), megabytes (MiB), and so forth, up to yottabytes (YiB).

Quick Start

To start using the DataSize component, import it from the reablocks library and enter the desired byte value as the value prop

import { DataSize } from 'reablocks';


export default function App() {
  return (
    <DataSize value={324344535345232482} />
  );
}

import { DataSize } from 'reablocks';

export default function App() {
  return (
    <DataSize value={324344535345232482} />
  );
}

288.08 PiB

Examples

Basic Usage

You can directly use the DataSize component to render data sizes. Here’s a basic example demonstrating how various byte values are converted into human-readable formats:

Handling Null/Undefined Values

The component allows for a customizable placeholder string to be displayed when the input value is null or undefined, enhancing the flexibility in various use cases:

API

The DataSize component and the formatSize function come with several configurable options:

Component API

Prop	Description	Default
`value` *	The size value to render. `FormatSizeTypes`
`emptyValue`	If the value is undefined/null it will return this value. `string`
`scale`	Customize scale for displaying units. `string[]`
`decimals`	The number of decimals to be set. `number`

Function API

For more advanced scenarios or when you need to programmatically format data sizes within your application logic, you can use the formatSize function provided by the API:


import { formatSize, FormatSizeTypes } from 'reablocks';
 
function yourFunction(size: FormatSizeTypes) {
  // size = number | string | null | undefined;
  return formatSize(size);
}

Design and Usability Tips

Intuitive Units: Automatically adjust units for data size to the most intuitive option (e.g., automatically displaying in MB instead of KB for large files), enhancing readability.