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);
}

@mayafelipe and @CleverAtBen I added an example with useConfirm.

export const usePrompt = () => {
    const [isDirty, setDirty] = useState(false)
    const blocker = useBlocker(isDirty)
    const { show } = useConfirm()

    const confirm = useCallback(() => {
        if (!isDirty) return Promise.resolve(true)

        return new Promise<boolean>(resolve => {
          show({
                title: 'You have unsaved changes.',
                subtitle: 'Changes you made may not be saved.',
                confirmText: 'Confirm',
                cancelText: 'Cancel',
                onConfirm: () => resolve(true),
                onCancel: () => resolve(false)
            })
        })
    }, [isDirty, show])

    useEffect(() => {
        if (blocker.state === 'blocked') {
            confirm().then(result => {
                if (result) blocker.proceed()
                else blocker.reset()
            })
        }
    }, [blocker, confirm])

    useEffect(() => {
        if (isDirty) window.onbeforeunload = () => 'Changes you made may not be saved.'

        return () => {
            window.onbeforeunload = null
        }
    }, [isDirty])

    return { setDirty }
}

Run yarn dev or yarn spa to run the app.
Hope this will be helpfull

Hey @Niyatihd. can you show me how is the implementation of useConfirmModal

@dev2-piniada you can check the example from comment above. You can find useConfirm implementation there

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