Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA countdown from a number of seconds that does not drift, with start, pause, resume and reset, and a callback when it reaches zero.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for a "resend code in 30 s" button, a session expiry warning, a sale ending soon or any visible time limit.
Do not use it to count up (use useStopwatch) or to schedule work (use useTimeout).
import { useCountdown } from "@/hooks/use-countdown"const { seconds, isRunning, start, reset } = useCountdown(30, {
onComplete: () => setCanResend(true),
})useCountdown(seconds: number, options?): { seconds, isRunning, isComplete, start, pause, resume, reset }
| Option | Type | Default | Description |
|---|---|---|---|
autoStart | boolean | false | Begin counting on mount. |
onComplete | () => void | - | Called once when the countdown reaches zero. |
tickMs | number | 250 | How often the display is refreshed. Time is read from the clock, so it does not drift. |
seconds is the whole seconds left, rounded up (it shows 1 until the last moment). start() restarts from the full duration, pause() and resume() keep what is left, and reset() stops and returns to the full duration.
A hook has no markup. Do not announce every second to a screen reader. Announce the start, "10 seconds left" and the end in a polite live region, and give the time in text, not only in a ring.
The hook ships with renderHook tests (use-countdown.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.