Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA declarative setTimeout with reset and clear controls, for toasts, auto-dismiss and delayed actions that follow props.
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 to run something once after a delay, and to restart or cancel it: dismiss a toast after 5 seconds, collapse a hint, return to a default state after inactivity.
Do not use it for repeating work (use useInterval).
import { useTimeout } from "@/hooks/use-timeout"const { reset, clear } = useTimeout(() => setOpen(false), open ? 4000 : null)
<div onPointerEnter={clear} onPointerLeave={reset}>...</div>useTimeout(callback, delay: number | null): { reset: () => void; clear: () => void }
| Name | Type | Description |
|---|---|---|
callback | () => void | Called once when the delay ends. The newest version is used. |
delay | number | null | Milliseconds. null or a negative number means no timer. |
reset | () => void | Restart the timer from now. |
clear | () => void | Stop the timer. It stays stopped until reset or a new delay. |
Changing delay restarts the timer. It is cleared on unmount.
A hook has no markup. Auto-dismissing content must give people enough time: pause the timer on hover and focus, as the demo does, and do not dismiss anything that needs a decision.
The hook ships with renderHook tests (use-timeout.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.