How to pop out custom modal when leaving or refreshing the page?

Question

I have been following from this blog, so far the my custom modal works when i click to another route/link.

The only problem of this implementation is that, the custom modal does not work when I refresh, instead it pops out the built-in confirm alert.

I have here my custom modal.

const CustomConfirm = ({ content, title, isBlocked }) => {
  
  // some codes here (from the blog)
  
  return (
    <>
      <Prompt when message={handleBlockedRoute} />
      {isModalOpen && (
        <ConfirmationModal
          showConfirmationModal={true}
          setShowConfirmationModal={(value) => console.log(value)}
          message={title}
          handleOk={handleConfirmNavigationClick}
          handleCancel={closeModal}
        />
      )}
    </>
  );
};

export default CustomConfirm;

Can we possibly pop out a custom modal before refresh occur?

Answer 1

If the user refreshes the page (refresh as in Ctrl+r) or tries to close a tab (as in leave the page) we cannot intercept and prevent those events from happening, thankfully.

Think of how annoying and horrible advertisements would be (like they were!) if that was allowed by the browser.

---

It's not possible to hijack the onbeforeunload event; How can I override the OnBeforeUnload dialog and replace it with my own?

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Answer 2

In componentWillUnmount method make isModalOpen = true.

useEffect(() => {

    return () => // set isModalOpen to true;

}, []);