-
-
Save MarksCode/64e438c82b0b2a1161e01c88ca0d0355 to your computer and use it in GitHub Desktop.
/** | |
* 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 @Niyatihd. How did you use the useConfirmModal, is it a context ? Could you share this implementataion please?
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
Great job!, it works