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. How did you use the useConfirmModal, is it a context ? Could you share this implementataion please?

@Niyatihd

The implementation for custom dialog that worked for me,

I would be keen to see the useConfirmModal implementation too please !!

@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