rooks
Version:
Collection of awesome react hooks
64 lines (63 loc) • 1.64 kB
TypeScript
/**
* usePageLeave hook
*
* Detect when user is about to leave the page using beforeunload and visibilitychange events.
* Useful for saving drafts, confirming navigation, or tracking engagement.
*
* @param onPageLeave - Callback function to execute when user is leaving the page
*
* @example
* ```tsx
* import { usePageLeave } from "rooks";
*
* function DraftEditor() {
* const [draft, setDraft] = useState("");
* const [saved, setSaved] = useState(true);
*
* usePageLeave(() => {
* if (!saved && draft) {
* // Save draft before leaving
* localStorage.setItem("draft", draft);
* }
* });
*
* const handleChange = (e) => {
* setDraft(e.target.value);
* setSaved(false);
* };
*
* const handleSave = () => {
* localStorage.setItem("draft", draft);
* setSaved(true);
* };
*
* return (
* <div>
* <textarea value={draft} onChange={handleChange} />
* <button onClick={handleSave}>Save Draft</button>
* {!saved && <p>You have unsaved changes</p>}
* </div>
* );
* }
* ```
*
* @example
* ```tsx
* // Confirm before leaving with unsaved changes
* function FormWithConfirm() {
* const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
*
* usePageLeave(() => {
* if (hasUnsavedChanges) {
* return "You have unsaved changes. Are you sure you want to leave?";
* }
* });
*
* return <form>Form fields here</form>;
* }
* ```
*
* @see https://rooks.vercel.app/docs/hooks/usePageLeave
*/
declare function usePageLeave(onPageLeave: () => void | string): void;
export { usePageLeave };