ElapsedTime
Loading example…
A live timer in tabular numerals. Every instance shares one ticker (a single timer, aligned to
the second, running only while something is mounted). It renders <time> with an ISO duration
in dateTime, exposes plain text such as “12 minutes” to assistive tech and is never an
aria-live region, so it does not interrupt anyone.
Import
Section titled “Import”import { ElapsedTime } from "@jcsoftdev/ui/atoms";Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/elapsed-time.
<ElapsedTime />| Prop | Type | Default | Description |
|---|---|---|---|
since * |
string | Date |
Moment the timer counts from. | |
serverOffsetMs |
number |
Server clock minus the client clock in ms, so a skewed device still shows the server’s elapsed time. | |
format |
"mm:ss" | "minutes" |
"mm:ss" |
mm:ss (default) shows a ticking clock; minutes shows whole minutes. With reduced motion requested, mm:ss is shown as whole minutes so the digits stop ticking. |
warnAt |
number |
Minutes from which the text turns warning (counting up), or down to which it does (countdown). | |
dangerAt |
number |
Minutes from which the text turns danger (counting up), or down to which it does (countdown). A countdown past its target is always danger. | |
countdownTo |
string | Date |
Turns the timer into a countdown to this moment; since is then only the fallback reference. |
|
classNames |
Partial<Record<ElapsedTimePart, string>> |
Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last. |
* marks a required prop.
It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).
Storybook stories
Section titled “Storybook stories”Source
Section titled “Source”packages/ui/src/atoms/elapsed-time/elapsed-time.tsx