Function useExitConfirmation

packages/shared/src/hooks/useExitConfirmation.ts:14–72

({
  message = 'You have unsaved changes that will be lost if you leave the page',
  onValidateAction,
  enabled = true,
}: ExitProps)

}

export function useExitConfirmation({
  message = 'You have unsaved changes that will be lost if you leave the page',
  onValidateAction,
  enabled = true,
}: ExitProps): UseExitConfirmation {
  const confirmRef = useRef(true);
  const router = useRouter();

  const checkShouldAskConfirmation = useCallback(
    () => !confirmRef.current || onValidateAction(),
    [onValidateAction],
  );

  useEffect(() => {
    if (!enabled || !router.isReady) {
      return undefined;
    }

    const closeHandler = (e: BeforeUnloadEvent) => {
      const shouldAskConfirmation = checkShouldAskConfirmation();

      if (shouldAskConfirmation) {
        return;
      }

      e.preventDefault();
      e.returnValue = message;
    };

    const routeHandler = () => {
      const shouldAskConfirmation = checkShouldAskConfirmation();

      // eslint-disable-next-line no-restricted-globals,no-alert
      if (shouldAskConfirmation || confirm(message)) {
        return;
      }

      router.events.emit('routeChangeError');
      // Throwing a string (not an Error) is Next.js's documented way to abort a
      // route change without triggering the dev error overlay.
      // eslint-disable-next-line @typescript-eslint/no-throw-literal
      throw 'Route change aborted by useExitConfirmation. Please ignore this error.';
    };

    window.addEventListener('beforeunload', closeHandler);
    router.events.on('routeChangeStart', routeHandler);

    return () => {
      window.removeEventListener('beforeunload', closeHandler);
      router.events.off('routeChangeStart', routeHandler);
    };
  }, [checkShouldAskConfirmation, enabled, message, router]);

  return {
    onAskConfirmation: (value) => {
      confirmRef.current = value;
    },
  };