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