return `usePrompt` capabilities from react-router

use-prompt.ts

/**
 * Prompts a user when they exit the page
 */

import { useCallback, useContext, useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

function useConfirmExit(confirmExit: () => boolean, when = true) {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) {
      return;
    }

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const result = confirmExit();
      if (result !== false) {
        push(...args);
      }
    };

    return () => {
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
}

export function usePrompt(message: string, when = true) {
  useEffect(() => {
    if (when) {
      window.onbeforeunload = function () {
        return message;
      };
    }

    return () => {
      window.onbeforeunload = null;
    };
  }, [message, when]);

  const confirmExit = useCallback(() => {
    const confirm = window.confirm(message);
    return confirm;
  }, [message]);
  useConfirmExit(confirmExit, when);
}

Thanks!! working with v6.8.1

Thanks a lot, I'm searching for a week and it's only way solve the problem work with version 6.6.1 for react-router-om
Now I can reset my app settings if user does not save changes and before go to another route

It worked for me on v6.4.2, but not in every case a navigation event occurred. It would block if the user closed the tab or tried to click a link to another page, but wouldn't block on history events. I tried listening to the popstate event as well, but to no avail.

Regardless, thanks for putting this together!

Yes, its same for me well... Is it possible to handle browser back buttons?

Thanks it's working perfectly ! But is there anyway to make a custom dialog instead of the standard confirm dialog?

Hello, was anyone able to make this work with custom dialog box??

Thanks it's working perfectly ! But is there anyway to make a custom dialog instead of the standard confirm dialog?

Did you happen to find a way???

The implementation for custom dialog that worked for me,

import { useCallback, useContext, useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';
import { useConfirmModal } from 'src/components';

const useConfirmExit = (confirmExit: (confirmNavigation: () => void) => void, when = true) => {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) return;

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const confirm = () => push(...args);
      confirmExit(confirm);
    };

    return () => {
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
};

export const usePrompt = (message: string, when = true, onContinue?: () => void) => {
  const { confirm } = useConfirmModal();

  // This is to ensure that work is saved on page accidental exit or refresh
  useEffect(() => {
    if (when) {
      window.onbeforeunload = function () {
        return message;
      };
    }

    return () => { window.onbeforeunload = null };
  }, [message, when]);

  const confirmExit = useCallback((confirmNavigation: () => void) => {
    const onConfirm = () => {
      if (onContinue) onContinue();
      confirmNavigation();
    }

    confirm.warning({
      title: '',
      description: message,
      confirmText: 'Continue',
      onConfirm,
    });
  }, [message, onContinue]);

  useConfirmExit(confirmExit, when);
};

Great job!, it works

Hey @Niyatihd. How did you use the useConfirmModal, is it a context ? Could you share this implementataion please?

@Niyatihd

The implementation for custom dialog that worked for me,

I would be keen to see the useConfirmModal implementation too please !!

@mayafelipe and @CleverAtBen I added an example with useConfirm.

export const usePrompt = () => {
    const [isDirty, setDirty] = useState(false)
    const blocker = useBlocker(isDirty)
    const { show } = useConfirm()

    const confirm = useCallback(() => {
        if (!isDirty) return Promise.resolve(true)

        return new Promise<boolean>(resolve => {
          show({
                title: 'You have unsaved changes.',
                subtitle: 'Changes you made may not be saved.',
                confirmText: 'Confirm',
                cancelText: 'Cancel',
                onConfirm: () => resolve(true),
                onCancel: () => resolve(false)
            })
        })
    }, [isDirty, show])

    useEffect(() => {
        if (blocker.state === 'blocked') {
            confirm().then(result => {
                if (result) blocker.proceed()
                else blocker.reset()
            })
        }
    }, [blocker, confirm])

    useEffect(() => {
        if (isDirty) window.onbeforeunload = () => 'Changes you made may not be saved.'

        return () => {
            window.onbeforeunload = null
        }
    }, [isDirty])

    return { setDirty }
}

Run yarn dev or yarn spa to run the app.
Hope this will be helpfull

Hey @Niyatihd. can you show me how is the implementation of useConfirmModal

@dev2-piniada you can check the example from comment above. You can find useConfirm implementation there

Hey @Niyatihd, would like to know how u made the useConfirmModal as well? @denchiklut your example wont work because can't use useBlocker with current router setup. Do you have any idea of using a custom modal with this example?

your example wont work because cant import unstable_useBlocker from the router.

@yara-tle yeah this example was written while it was unstable API. Now you can import useBlocker without unstable prefix

@denchiklut useBlocker and usePrompt don't work with routers that don't have access to the new data API, like BrowserRouter component, this gist does

hey, do you manage to block when the user clicks the back browser button?

for anyone having issue with the back button, check this code

import { useCallback, useContext, useEffect } from "react";
import { useDispatch } from "react-redux";
import { UNSAFE_NavigationContext as NavigationContext } from "react-router-dom";

function useConfirmExit(confirmExit: () => boolean, when = true) {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) {
      return;
    }

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const result = confirmExit();

      if (result !== false) {
        push(...args);
      }
    };

    return () => {
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
}

export function usePrompt(message: string, when = true) {
  useEffect(() => {
    if (!when) return;
    window.onbeforeunload = function () {
      return message;
    };

    window.history.pushState(null, "", window.location.href);
    window.onpopstate = function () {
      const confirm = window.confirm(message);

      if (confirm) {
        dispatch(setIsEditing(false));
        window.onpopstate = null;
        window.history.back();
      } else {
        window.history.pushState(null, "", window.location.href);
      }
    };
    return () => {
      window.onbeforeunload = null;
      window.onpopstate = null;
      }, [message, when]);

  const confirmExit = useCallback(() => {
    const confirm = window.confirm(message);

    if (confirm) {
      dispatch(setIsEditing(false));
    }

    return confirm;
  }, [message]);
  useConfirmExit(confirmExit, when);
}

for anyone having issue with the back button, check this code

import { useCallback, useContext, useEffect } from "react";
import { useDispatch } from "react-redux";
import { UNSAFE_NavigationContext as NavigationContext } from "react-router-dom";

function useConfirmExit(confirmExit: () => boolean, when = true) {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) {
      return;
    }

    const push = navigator.push;

    navigator.push = (...args: Parameters<typeof push>) => {
      const result = confirmExit();

      if (result !== false) {
        push(...args);
      }
    };

    return () => {
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
}

export function usePrompt(message: string, when = true) {
  useEffect(() => {
    if (!when) return;
    window.onbeforeunload = function () {
      return message;
    };

    window.history.pushState(null, "", window.location.href);
    window.onpopstate = function () {
      const confirm = window.confirm(message);

      if (confirm) {
        dispatch(setIsEditing(false));
        window.onpopstate = null;
        window.history.back();
      } else {
        window.history.pushState(null, "", window.location.href);
      }
    };
    return () => {
      window.onbeforeunload = null;
      window.onpopstate = null;
      }, [message, when]);

  const confirmExit = useCallback(() => {
    const confirm = window.confirm(message);

    if (confirm) {
      dispatch(setIsEditing(false));
    }

    return confirm;
  }, [message]);
  useConfirmExit(confirmExit, when);
}

Thanks for the suggestion, @kanavi57

This code works when the user clicks directly on the back button, but it won't work if the user long-presses the back button and chooses a specific page to return to.