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);
}

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.