usePageLeave

import { usePageLeave } from '@kivora/react';

function Editor({ hasUnsavedChanges }) {
  usePageLeave(() => {
    if (hasUnsavedChanges) {
      console.log('User is leaving with unsaved changes');
    }
  });

  return <textarea>{/* Editor */}</textarea>;
}

function FormEditor() {
  const [content, setContent] = useState('');
  const [saved, setSaved] = useState(true);

  usePageLeave(() => {
    if (!saved) {
      // Note: Modern browsers ignore custom messages
      // but still show a generic confirmation dialog
      return 'You have unsaved changes!';
    }
  });

  const handleChange = (e) => {
    setContent(e.target.value);
    setSaved(false);
  };

  return (
    <>
      <textarea value={content} onChange={handleChange} />
      <button onClick={() => {
        saveContent(content);
        setSaved(true);
      }}>
        Save
      </button>
    </>
  );
}

function Article() {
  const [readTime, setReadTime] = useState(0);

  useEffect(() => {
    const start = Date.now();
    return () => {
      setReadTime(Date.now() - start);
    };
  }, []);

  usePageLeave(() => {
    analytics.track('article_exit', {
      timeSpent: readTime,
      scrollDepth: window.scrollY,
    });
  });

  return <article>{/* Content */}</article>;
}

function NoteEditor() {
  const [note, setNote] = useState('');

  usePageLeave(() => {
    if (note.trim()) {
      localStorage.setItem('draft', note);
    }
  });

  return (
    <textarea 
      value={note}
      onChange={(e) => setNote(e.target.value)}
      placeholder="Your notes..."
    />
  );
}

function CheckoutForm() {
  const [step, setStep] = useState(1);
  const totalSteps = 3;

  usePageLeave(() => {
    if (step > 1 && step < totalSteps) {
      console.warn('User leaving incomplete checkout');
    }
  });

  return <div>{/* Multi-step form */}</div>;
}

function AuthenticatedApp() {
  usePageLeave(() => {
    // Clean up session data
    sessionStorage.clear();
    
    // Notify server
    navigator.sendBeacon('/api/session/end', 
      JSON.stringify({ timestamp: Date.now() })
    );
  });

  return <div>{/* App */}</div>;
}

function usePageLeave(handler: () => void): void;