Docs
πŸ—οΈ ⏐ Components
Data
Data Size

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

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

PropDescriptionDefault
allowToggleAllow the user to toggle between relative and absolute time.
boolean
false
cacheKeyThe cache key to use for storing the user's preference.
string
dateThe date to format.
string | number | Date
formatThe format to use.
string
MM/dd/yy hh:mm:ss a
fromNowWhether to use relative time.
boolean
addSuffixWhether to add a suffix to the relative time.
boolean
true
classNameAdditional CSS class names to use.
string
includeSecondsWhether to include seconds in the relative time.
boolean
false
emptyMessageThe message to display when the date is empty. Default is "N/A".
string
N/A
themeTheme 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);
}

Below is the function arguments for formatSize:

ParameterType
sizeFormatSizeTypes
emptyValuestring
scaleArray<string>
decimalsnumber
Source: https://github.com/reaviz/reablocks/blob/1185cf8c2523443c55bdc3bf58971b45de459dc8/src/data/DataSize/utils.ts#L14

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.