Confirm Navigation Modal with useBlocker

[User6531]

Hello everyone, I'd like to share a Confirm Navigation Modal that I've implemented using useBlocker. I'm eager to hear the opinions of experienced developers about this implementation. Perhaps I've overlooked something or haven't covered all the cases.

import { useEffect, useCallback } from "react";
import ModalSubmit from "components/ModalSubmit/ModalSubmit";
import {
  unstable_useBlocker as useBlocker,
  unstable_BlockerFunction as BlockerFunction,
} from "react-router-dom";

const title = "Are you sure you want to leave this page?";
const subtitle =
  "You have unsaved changes that will be lost if you leave this page";

const handleRouteChange = (event: BeforeUnloadEvent) => {
  event.preventDefault();
  event.returnValue = title;
  return title;
};

type Props = {
  isBlocked: boolean;
};

/**
 * Component provides a reusable way to handle confirmation of leaving a page
 * without saving changes and displays a modal for the user to confirm their decision.
 *
 * @param isBlocked - boolean flag to determine if navigation should be blocked
 *
 * @returns - Modal Component
 */
const ConfirmNavigation = ({ isBlocked }: Props) => {
  // Allow the submission navigation to the same route to go through
  const shouldBlock = useCallback<BlockerFunction>(
    ({ currentLocation, nextLocation }) =>
      isBlocked && currentLocation.pathname !== nextLocation.pathname,
    [isBlocked],
  );
  const blocker = useBlocker(shouldBlock);
  const isBlockedState = blocker.state === "blocked";
  const isProceedingState = blocker.state === "proceeding";

  useEffect(() => {
    if (isBlockedState && !isBlocked) {
      window.removeEventListener("beforeunload", handleRouteChange);
      blocker.reset?.();
    } else {
      window.addEventListener("beforeunload", handleRouteChange);
    }

    return () => {
      window.removeEventListener("beforeunload", handleRouteChange);
    };
  }, [blocker, isBlocked]);

  const handleSubmit = () => blocker.proceed?.();
  const handleCancel = () => blocker.reset?.();

  return (
    <ModalSubmit
      title={title}
      iconType="warn"
      subtitle={subtitle}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
      open={isBlockedState || isProceedingState}
      submitButtonTitle="Yes"
      cancelButtonTitle="No"
    />
  );
};

<ConfirmNavigation isBlocked={isFormDirty} />

[UltigendLemate]

Loved the implementation. saved me an hour from coding this myself. Thanks buddy.

[Setoue]

Nice implementation, helped a lot

[remus-selea]

According to MDN it is recommended to listen for beforeunload only when there are unsaved changes and to remove the listener when it is not needed. Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes

The default browser unsaved changes warning modal (e.g. reload, leave site) may also be shown on top of the custom ModalSubmit modal, and the user can cancel both. As far as I know we cannot tell if the default browser warning modal is open or not, to hide our custom one in that case. This is what I'm doing:

  useEffect(() => {
    if (isBlocked) {
      window.addEventListener("beforeunload", handleBeforeUnload);
    } else {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    }

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [isBlocked]);