useUnload

01 - CustomHooks.fs

open Feliz
open Fable.Core.JsInterop

/// Uses the onbeforeunload event from a component via the useEffect hook.
/// Returning a value of true will notify the user that they may have unsaved changes.
let useUnload (promptOnExit: unit -> bool) =
    let promptOnExitRef = React.useRef promptOnExit
    React.useEffect(fun () ->         
        let handler (e: Browser.Types.Event) =
            let prompt = promptOnExitRef.current()
            if prompt
            then e.returnValue <- true
            else ()

        Browser.Dom.window.onbeforeunload <- handler
        React.createDisposable(fun () -> 
            Browser.Dom.window.removeEventListener("beforeunload", !!handler)
        )
    , [| box promptOnExitRef |])

02 - Page.fs

let page = React.functionComponent(fun props -> 
  
  useUnload(fun () ->
    true // prompt the user that they may have unsaved changes
  )
  
  h1 [] [str "Test Page"]
)

03 - AnotherPage.fs

let page = React.functionComponent(fun props -> 
  let isChanged, setIsChanged = React.useState(false)
  
  useUnload(fun () ->
    // Function component has already been unmounted, so state is already gone.
    // Prompt the user to save if "unsaved changes detected" message is visible in the DOM.
    let unsavedChangesDetectedMsg = Browser.Dom.window.document.querySelector("#UnsavedChanges")
    unsavedChangesDetectedMsg <> null 
  )
  
  h1 [] [str "Test Page"]
  
  if isChanged then
    div [Id "UnsavedChanges"] [str "Changes detected!"]
)