useBeforeClosingWindowPrompt - a hook that prompts user before they close the window when there are unsaved changes

useBeforeClosingWindowPrompt.ts

import { useEffect } from "react";

/**
 * A hook that prevents closing or refreshing if there are unsaved changes,
 * offering the user a prompt to confirm before closing the window.
 * @param promptBeforeClosingWindow A boolean indicating if we should prompt before closing
 */
export function useBeforeClosingWindowPrompt(promptBeforeClosingWindow: boolean) {
  useEffect((): (() => void) => {
    function handleBeforeUnload(e: BeforeUnloadEvent): void {
      e.preventDefault();
      // eslint-disable-next-line no-param-reassign
      e.returnValue = ""; // Chrome requires returnValue to be set
    }

    if (promptBeforeClosingWindow) {
      window.addEventListener("beforeunload", handleBeforeUnload);
    }

    return (): void => {
      if (promptBeforeClosingWindow) {
        window.removeEventListener("beforeunload", handleBeforeUnload);
      }
    };
  }, [promptBeforeClosingWindow]);
}