UsePageLeave

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5type PageLeaveOptions = {
6  confirmationMessage?: string;
7  showConfirmation?: boolean;
8};
9 
10type PageLeaveResult = {
11  isPageLeft: boolean;
12  onPageLeave: (callback: () => void) => void;
13};
14 
15export function usePageLeave(options: PageLeaveOptions = {}): PageLeaveResult {
16  const { confirmationMessage, showConfirmation = false } = options;
17 
18  // Track if user left the page (switched tabs)
19  const [isPageLeft, setIsPageLeft] = useState(false);
20 
21  // Store the callback to execute when user leaves
22  const callbackRef = useRef<(() => void) | null>(null);
23 
24  // Method to set the callback
25  const onPageLeave = useCallback((callback: () => void) => {
26    callbackRef.current = callback;
27  }, []);
28 
29  // Handle beforeunload event (page close, refresh, navigate away)
30  const handleBeforeUnload = useCallback(
31    (event: BeforeUnloadEvent) => {
32      if (callbackRef.current) {
33        callbackRef.current();
34      }
35 
36      if (showConfirmation) {
37        event.preventDefault();
38        // Custom message (may be ignored by modern browsers)
39        event.returnValue = confirmationMessage || '';
40        return confirmationMessage || '';
41      }
42      return undefined;
43    },
44    [showConfirmation, confirmationMessage],
45  );
46 
47  // Handle visibility change (tab switch)
48  const handleVisibilityChange = useCallback(() => {
49    if (document.visibilityState === 'hidden') {
50      setIsPageLeft(true);
51      if (callbackRef.current) {
52        callbackRef.current();
53      }
54    } else if (document.visibilityState === 'visible') {
55      setIsPageLeft(false);
56    }
57  }, []);
58 
59  useEffect(() => {
60    // Skip in non-browser environments to support SSR
61    if (typeof window === 'undefined') return undefined;
62 
63    // Add beforeunload event for page close/refresh
64    window.addEventListener('beforeunload', handleBeforeUnload);
65 
66    // Add visibilitychange for tab switching
67    document.addEventListener('visibilitychange', handleVisibilityChange);
68 
69    return () => {
70      window.removeEventListener('beforeunload', handleBeforeUnload);
71      document.removeEventListener('visibilitychange', handleVisibilityChange);
72    };
73  }, [handleBeforeUnload, handleVisibilityChange]);
74 
75  return { isPageLeft, onPageLeave };
76}