Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAsk the browser to confirm before the tab closes or reloads while there is unsaved work, and switch the guard off the moment it is saved.
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 on editors and long forms to prevent accidental data loss when someone closes the tab, reloads or types a new address.
Do not use it for in-app navigation between routes; use your router's blocking API there. Do not leave it on when nothing is unsaved, since it trains people to ignore the prompt.
import { useBeforeUnload } from "@/hooks/use-before-unload"const dirty = draft !== saved
useBeforeUnload(dirty)useBeforeUnload(enabled: boolean): void
| Name | Type | Description |
|---|---|---|
enabled | boolean | When true the browser shows its own "Leave site?" prompt on unload. |
Browsers show a fixed message and ignore custom text. The listener is added only while enabled is true and removed on change or unmount. Back-forward cache is kept: the hook does not use unload.
The browser's native prompt is accessible. Also show a visible "Unsaved changes" state in the page and provide a Save button, so the warning is not the only signal.
The hook ships with renderHook tests (use-before-unload.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.