Data Size

Name: Data Size
Author: reaviz

ASecurity

Formats byte values into human-readable sizes (B, KiB, MiB, GiB, etc.) using binary scale (1024). Also exports `formatSize` utility function.

4 stars
0 votes
0 copies
1 view
Added May 27, 2026

data-ai

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill data-size --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Data Size?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-data-size/badge)](https://www.skillsdirectory.com/skills/reaviz-data-size)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# DataSize

Formats byte values into human-readable sizes (B, KiB, MiB, GiB, etc.) using binary scale (1024). Also exports `formatSize` utility function.

## Import

```tsx
import { DataSize } from 'reablocks';
// or utility only
import { formatSize } from 'reablocks';
```

## DataSize Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number \| string \| null \| undefined` | — | Byte value to format |
| `emptyValue` | `string` | `'N/A'` | Displayed when value is null/undefined |
| `scale` | `string[]` | `['B','KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB']` | Custom unit scale |
| `decimals` | `number` | `2` | Number of decimal places |

## Basic Usage

```tsx
<DataSize value="4500" />        {/* "4.39 KiB" */}
<DataSize value="34343233" />    {/* "32.75 MiB" */}
<DataSize value={434334434123} /> {/* "404.52 GiB" */}
```

## Custom Scale

```tsx
const scale = ['b', 'kb', 'mb', 'gb', 'tb', 'pb', 'eb', 'zb', 'yb'];
<DataSize value="4500" scale={scale} />  {/* "4.39 kb" */}
```

## Custom Decimals

```tsx
<DataSize value={34343233} decimals={0} />  {/* "33 MiB" */}
<DataSize value={34343233} decimals={5} />  {/* "32.74538 MiB" */}
```

## Empty Value

```tsx
<DataSize value={undefined} />                       {/* "N/A" */}
<DataSize value={null} emptyValue="Nothing to see" /> {/* "Nothing to see" */}
```

## formatSize Utility

```tsx
import { formatSize } from 'reablocks';

formatSize(4500);              // "4.39 KiB"
formatSize(null, 'N/A');       // ["N/A"]
formatSize(4500, 'N/A', ['B','KB','MB','GB'], 0); // custom scale + decimals
```