usePageLeave

npm install rooks

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);
      console.log("Draft saved before leaving");
    }
  });
 
  const handleChange = (e) => {
    setDraft(e.target.value);
    setSaved(false);
  };
 
  const handleSave = () => {
    localStorage.setItem("draft", draft);
    setSaved(true);
  };
 
  return (
    <div>
      <textarea
        value={draft}
        onChange={handleChange}
        placeholder="Start writing..."
        rows={10}
        style={{ width: "100%" }}
      />
      <button onClick={handleSave}>Save Draft</button>
      {!saved && (
        <p style={{ color: "orange" }}>⚠️ You have unsaved changes</p>
      )}
    </div>
  );
}

function FormWithConfirmation() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
  usePageLeave(() => {
    if (hasUnsavedChanges) {
      return "You have unsaved changes. Are you sure you want to leave?";
    }
  });
 
  return (
    <form onChange={() => setHasUnsavedChanges(true)}>
      <input name="name" placeholder="Name" />
      <input name="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

function SessionTracker() {
  const sessionStartRef = useRef(Date.now());
 
  usePageLeave(() => {
    const sessionDuration = Date.now() - sessionStartRef.current;
 
    // Send analytics
    fetch("/api/analytics", {
      method: "POST",
      body: JSON.stringify({
        sessionDuration,
        page: window.location.pathname,
      }),
    });
  });
 
  return <div>Your content here</div>;
}

function AutoSaveEditor() {
  const [content, setContent] = useState("");
  const contentRef = useRef(content);
 
  // Keep ref up to date
  useEffect(() => {
    contentRef.current = content;
  }, [content]);
 
  usePageLeave(() => {
    if (contentRef.current) {
      // Auto-save to server
      fetch("/api/save", {
        method: "POST",
        body: JSON.stringify({ content: contentRef.current }),
      });
    }
  });
 
  return (
    <textarea
      value={content}
      onChange={(e) => setContent(e.target.value)}
      placeholder="Your content is auto-saved when you leave"
    />
  );
}

function SecureForm() {
  const [password, setPassword] = useState("");
 
  usePageLeave(() => {
    // Clear sensitive data from memory
    setPassword("");
 
    // Clear any cached sensitive data
    sessionStorage.removeItem("tempData");
  });
 
  return (
    <input
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Password"
    />
  );
}