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

Verify Github on Galxe. gid:FEtLZqZnzCz7ibteA6nkC3

Working! <3

Can also confirm this is working with react-router-dom v6.4.2. Thank you!

It worked for me on v6.4.2, but not in every case a navigation event occurred. It would block if the user closed the tab or tried to click a link to another page, but wouldn't block on history events. I tried listening to the popstate event as well, but to no avail.

Regardless, thanks for putting this together!

This also worked for me, on v6.4.3. Thank you so much!!

On v6.5.0 this works with useNavigate. If I trigger navigation with router.navigate (see remix-run/react-router#8599 (comment)), this doesn't work. I guess I'll wait for Prompt to come back officially now that it seems to be gaining progress.

Version 6.6.1 works well. Thank you!

Perfect code, Thank you very much!
you even did better the chatGPT

Thanks a lot!. You can actually simplify it by using
import { unstable_useBlocker as useBlocker } from 'react-router-dom'

like this

Thanks!! working with v6.8.1

Thanks a lot, I'm searching for a week and it's only way solve the problem work with version 6.6.1 for react-router-om
Now I can reset my app settings if user does not save changes and before go to another route

It worked for me on v6.4.2, but not in every case a navigation event occurred. It would block if the user closed the tab or tried to click a link to another page, but wouldn't block on history events. I tried listening to the popstate event as well, but to no avail.

Regardless, thanks for putting this together!

Yes, its same for me well... Is it possible to handle browser back buttons?

Thanks it's working perfectly ! But is there anyway to make a custom dialog instead of the standard confirm dialog?

Hello, was anyone able to make this work with custom dialog box??

Thanks it's working perfectly ! But is there anyway to make a custom dialog instead of the standard confirm dialog?

Did you happen to find a way???

The implementation for custom dialog that worked for me,

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

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

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

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const confirm = () => push(...args);
      confirmExit(confirm);
    };

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

export const usePrompt = (message: string, when = true, onContinue?: () => void) => {
  const { confirm } = useConfirmModal();

  // This is to ensure that work is saved on page accidental exit or refresh
  useEffect(() => {
    if (when) {
      window.onbeforeunload = function () {
        return message;
      };
    }

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

  const confirmExit = useCallback((confirmNavigation: () => void) => {
    const onConfirm = () => {
      if (onContinue) onContinue();
      confirmNavigation();
    }

    confirm.warning({
      title: '',
      description: message,
      confirmText: 'Continue',
      onConfirm,
    });
  }, [message, onContinue]);

  useConfirmExit(confirmExit, when);
};

Great job!, it works

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