react-concurrent-router/esm/useBeforeRouteLeave.js

Performant routing embracing React concurrent UI patterns

import { useContext, useCallback, useEffect } from 'react';
import { R as RouterContext } from './RouterContext-Bf2jDrm9.js';

const useBeforeRouteLeave = ({
  toggle = true,
  unload = true,
  message = ''
}) => {
  const {
    history: {
      block
    }
  } = useContext(RouterContext);
  let unblock;
  const handleBeforeunload = useCallback(event => {
    event.preventDefault();
    event.returnValue = '';
  }, []);
  const register = useCallback(() => {
    unblock = block(message);
    if (unload) {
      window.addEventListener('beforeunload', handleBeforeunload);
    }
  }, [block]);
  const cleanup = useCallback(() => {
    unblock();
    if (unload) {
      window.removeEventListener('beforeunload', handleBeforeunload);
    }
  }, [unblock]);
  useEffect(() => {
    if (toggle) register();
    return () => {
      if (toggle) cleanup();
    };
  }, [toggle, register, cleanup]);
};

export { useBeforeRouteLeave as default };