Duration

The Duration component is designed to represent time durations derived from epoch time values in an easily interpretable format. It's suitable for displaying durations like processing times, event lengths, or intervals in a human-format (opens in a new tab).

Quick Start

To start using the Duration component, import it from the reablocks library and provide the value props in miliseconds.

import { Duration } from 'reablocks';


export default function App() {
  return (
    <Duration value="123459101" />
  );
}

import { Duration } from 'reablocks';

export default function App() {
  return (
    <Duration value="123459101" />
  );
}

1.43 days

Examples

API

Component

Prop	Description	Default
`value` *	Size to pass to the formatter. `DurationFormatTypes`
`emptyValue`	If the value is undefined/null it will return this value. `string`	`N/A`

Function

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

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

Date Format Ellipsis 🆕