6

My problem is that I need the user to confirm if he wants to continue to refresh the page. If he press No, it won't refresh the page.

Kindly take a look at my development so far:-

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
Joseph
  • 7,042
  • 23
  • 83
  • 181

2 Answers2

11

If you want to display a sort of confirmation before leaving the page then follow the beforeunload event guidelines

According to the specification, to show the confirmation dialog an event handler should call preventDefault() on the event.

However note that not all browsers support this method, and some instead require the event handler to implement one of two legacy methods:

  • assigning a string to the event's returnValue property
  • returning a string from the event handler.

To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.

The HTML specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML specification for more details.

I just tested this in chrome and safari and it works. I don't have a windows box, but this should cover most cases.

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

enter image description here enter image description here

Edit put-a-warning-if-page-refresh-in-reactjs

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Thank you. How do you customize message by the way? – Joseph Aug 26 '21 at 06:11
  • 1
    @Joseph You can't AFAIK... likely part of the whole "...to combat unwanted pop-ups..." business. I think it is generally highly discouraged to implement nag screens like this, the focus being that you may want to clean up resources and such before the page unloads, not bother the user, or more specifically, prevent them from doing what they want in the browser. – Drew Reese Aug 26 '21 at 06:13
-1

I think you are looking for this.

https://dev.to/eons/detect-page-refresh-tab-close-and-route-change-with-react-router-v5-3pd

Browser Refresh, Closing Tab, and back and forward buttons, are all explained.

Try this:

    useEffect(()=>{
    const unloadCallback = (event) => {      
        const e = event || window.event;
        //console.log(e)
        e.preventDefault();
        if (e) {
          e.returnValue = ''
        }
        return '';
          
    };
    
    window.addEventListener("beforeunload", unloadCallback);
    return () => {
      //cleanup function
      window.removeEventListener("beforeunload", unloadCallback);
    }
    
  },[])
Mozi47
  • 44
  • 5