DEV Community

loading...
Cover image for How To Create A Simple Alert For An onbeforeunload Event (Closing Browser or Navigating Away From Page) [updated]

How To Create A Simple Alert For An onbeforeunload Event (Closing Browser or Navigating Away From Page) [updated]

Tia Eastwood
Artist turned software developer, hoping to share my knowledge & help other dev newbies out. I learnt to code during 2020 by self-teaching and bootcamp. I am now employed as a full stack developer.
Updated on ・2 min read

edit: credit to Alex Lohr for suggesting to put the code inside a useEffect :)

Here is a useful little snippet for if you have a page like a checkout or a survey and you want to warn people about leaving the page before they've completed it.

  window.onbeforeunload = (event) => {
    if (whatever your condition is here) {
      return true;
    }
  };


// inside a useEffect:
useEffect(() => {
  if (conditionState) {
    const listener = () => true
    window.addEventListener('beforeunload', listener)
    return () => window.removeEventListener('beforeunload', listener)
  }
}, [conditionState])


// the return here removes the eventListener, until next time the useEffect runs again 
Enter fullscreen mode Exit fullscreen mode

The alert gives the user the option to confirm or cancel their navigation. Alerts should never stop someone from leaving a page or closing their browser though; that's a big no-no.

An example of a browser alert

An onbeforeunload event occurs when the document (the current page of your site/application) is about to be unloaded (closed/exited). A example of this would be someone closing the browser window or clicking a link to a different page.

Most browsers will show a default message like "changes you've made will not be saved". You can't edit this message, but it does the job as a warning. Due to this, you don't need to return any specific content or message in the function, just return true in order for it to work.

This function will be called when an onbeforeunload event occurs. If the condition inside is met, then the function will return true and the alert will be shown. So all you need to do is apply a condition to decide when the alert will be shown. For example, if using this in a React application, then the condition could be based on a certain state.

There are other ways of achieving this sort of behaviour, such as using Prompt in react-router, but if you're just looking for a simple solution then I hope this helps! If you have anything to add, please leave a comment.

Discussion (2)

Collapse
lexlohr profile image
Alex Lohr

Do not directly use window.onbeforeunload, as it will overwrite all other event listeners. Instead, use the following effect:

useEffect(() => {
  if (shouldIntervene) {
    const listener = () => true
    window.addEventListener('beforeunload', listener)
    return () => window.removeEventListener('beforeunload', listener)
  }
}, [shouldIntervene])
Enter fullscreen mode Exit fullscreen mode

This has the added advantage of automatically unsubscribing from the event.

Collapse
tiaeastwood profile image
Tia Eastwood Author

Fantastic, thanks for the tip!

Forem Open with the Forem app