use-native-unsaved-changes use-native-unsaved-changes.ts

0% Statements 0/20

0% Branches 0/1

0% Functions 0/1

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect } from 'react';

/**
 * If the given flag is true, it will prevent the user from navigating away from the page, using the browser native navigation blocker.
 * This does not prevent in-app navigation, you should use `useBlocker` from `react-router-dom` along with this hook for that.
 */
export const useNativeUnsavedChanges = (shouldPreventNavigation = false) => {
  useEffect(() => {
    if (shouldPreventNavigation) {
      const handler = (event: BeforeUnloadEvent) => {
        event.preventDefault();
      };

      window.addEventListener('beforeunload', handler);
      return () => window.removeEventListener('beforeunload', handler);
    }

    return undefined;
  }, [shouldPreventNavigation]);
};