Not long ago Google Chrome announced the soon to come deprecation of alert(), confirm(), and prompt for cross-origin iframes. Source
The deprecation has been postponed multiple times due to the negative outburst of the web dev community. According to this Chromium thread the changes won't take effected until after January 2022. However, lots of us are looking for alternatives to meet the uncertain deadline. In my case I need to substitute react-routers' own Prompt component.
According to the RRPrompt documentation:
The Prompt component is used to prompt the user before navigating away from a page. When your application enters a state that should prevent the user from navigating away (like a form is half-filled out), render a Prompt component.
My example:
function NavigationWarningImpl({ enabled, message }: Props) {
useEffect(() => {
if (enabled && Platform.OS === 'web') {
const listener = (event: any) => {
// Cancel the event as stated by the standard.
event.preventDefault()
// Chrome requires returnValue to be set.
event.returnValue = ''
}
window.addEventListener('beforeunload', listener)
return () => {
window.removeEventListener('beforeunload', listener)
}
}
}, [enabled])
return <Prompt when={enabled} message={message} />
}
I need a solution that intercepts the navigation until the user takes action. If you are unfamiliar with React but know vanilla JS, I am also curious about solutions that would substitute blocker dialogs (not just the react-router version but in general).
