usePromt

promt.hook.ts

import { useEffect } from 'react'
import { unstable_useBlocker as useBlocker } from 'react-router-dom'

export function usePrompt(message: string, when = true) {
    const blocker = useBlocker(when)

    useEffect(() => {
        if (when) window.onbeforeunload = () => message

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

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