Data Size

The Data Size component is designed to display data sizes in a human-readable format. Leveraging the human-format (opens in a new tab) 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
`allowToggle`	Allow the user to toggle between relative and absolute time. `boolean`	`false`
`cacheKey`	The cache key to use for storing the user's preference. `string`
`date`	The date to format. `string \| number \| Date`
`format`	The format to use. `string`	`MM/dd/yy hh:mm:ss a`
`fromNow`	Whether to use relative time. `boolean`
`addSuffix`	Whether to add a suffix to the relative time. `boolean`	`true`
`className`	Additional CSS class names to use. `string`
`includeSeconds`	Whether to include seconds in the relative time. `boolean`	`false`
`emptyMessage`	The message to display when the date is empty. Default is "N/A". `string`	`N/A`
`theme`	Theme for the DateFormat. `DateFormatTheme`

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.

Icons Date Format