Durations

How long something took, how long it has been running, how long is left, and how long ago it was.

import { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort } from '@basmilius/react-ui/format';

tsx

import { formatAgo, formatClockDuration, formatCountdown, formatDuration, formatElapsedShort, useFormatLocale } from '@basmilius/react-ui/format';
import { PreferencesBar } from '../shared/preferences-bar.tsx';
import { Values } from '../shared/values.tsx';

const MINUTE = 60_000;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

export default function DurationsDemo() {
    useFormatLocale();

    return (
        <div className="flex w-full max-w-lg flex-col gap-4">
            <PreferencesBar />
            <Values
                rows={[
                    ['formatDuration(42_000)', formatDuration(42_000)],
                    ['formatDuration(90 * MINUTE)', formatDuration(90 * MINUTE)],
                    ['formatCountdown(4 * DAY + 3 * HOUR)', formatCountdown(4 * DAY + 3 * HOUR)],
                    ['formatCountdown(9 * MINUTE)', formatCountdown(9 * MINUTE)],
                    ['formatElapsedShort(125_000)', formatElapsedShort(125_000)],
                    ['formatElapsedShort(200 * MINUTE)', formatElapsedShort(200 * MINUTE)],
                    ['formatClockDuration(14_000)', formatClockDuration(14_000)],
                    ['formatClockDuration(HOUR + 62_000)', formatClockDuration(HOUR + 62_000)],
                    ['formatAgo(20_000)', formatAgo(20_000)],
                    ['formatAgo(3 * MINUTE)', formatAgo(3 * MINUTE)],
                    ['formatAgo(2 * DAY)', formatAgo(2 * DAY)]
                ]}
            />
        </div>
    );
}

Every function takes milliseconds.

Function	Writes
`formatDuration(ms)`	How long something took, at the coarsest unit that still says something: `42 s`, `18 min`, `1.5 h`.
`formatCountdown(ms)`	How long a window still has, tight enough for the end of a bar: `4d 3h`, `12h 8m`, `9m`.
`formatElapsedShort(ms)`	How long something has been running, in two units at most: `12s`, `2m 5s`, `3h 20m`. Anything above zero reads as at least `1s`.
`formatClockDuration(ms)`	A stopwatch someone watches while it runs: `00:14`, and `1:02:03` past an hour.
`formatAgo(ms)`	How long ago, short enough for the right edge of a row: `now`, `3m ago`, `2d ago`.

The units of the first four are English abbreviations, the way the rest of the interface is written. Only the number follows the region, which is what 1,5 h against 1.5 h is about. formatAgo is words as much as a number, so the language writes all of it: 3 min. geleden in Dutch.

To keep a duration current while it runs, redraw it on a clock with useNow, or write it straight into the node with useTickingText.

Durations ​

Durations