return `usePrompt` capabilities from react-router

use-prompt.ts

/**
 * Prompts a user when they exit the page
 */

import { useCallback, useContext, useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

function useConfirmExit(confirmExit: () => boolean, when = true) {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) {
      return;
    }

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const result = confirmExit();
      if (result !== false) {
        push(...args);
      }
    };

    return () => {
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
}

export function usePrompt(message: string, when = true) {
  useEffect(() => {
    if (when) {
      window.onbeforeunload = function () {
        return message;
      };
    }

    return () => {
      window.onbeforeunload = null;
    };
  }, [message, when]);

  const confirmExit = useCallback(() => {
    const confirm = window.confirm(message);
    return confirm;
  }, [message]);
  useConfirmExit(confirmExit, when);
}

Hey @Niyatihd, would like to know how u made the useConfirmModal as well? @denchiklut your example wont work because can't use useBlocker with current router setup. Do you have any idea of using a custom modal with this example?

your example wont work because cant import unstable_useBlocker from the router.

@yara-tle yeah this example was written while it was unstable API. Now you can import useBlocker without unstable prefix

@denchiklut useBlocker and usePrompt don't work with routers that don't have access to the new data API, like BrowserRouter component, this gist does