Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to make a custom Prompt (using getUserConfirmation) for React Router v4
// use Prompt like normal... magic happens in getUserConfirmation
class App extends Component {
render () {
return (
<Router getUserConfirmation={getUserConfirmation}>
{...}
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
</Router>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
// default behavior uses window.confirm
const getUserConfirmation = (message, callback) => {
const modal = document.createElement('div')
document.body.appendChild(modal)
const withCleanup = (answer) => {
ReactDOM.unmountComponentAtNode(modal)
document.body.removeChild(modal)
callback(answer)
}
ReactDOM.render(
<UserConfirmation
message={message}
onCancel={() => withCleanup(false)}
onConfirm={() => withCleanup(true)}
/>,
modal
)
}
@ningo-agilityio

This comment has been minimized.

Copy link

@ningo-agilityio ningo-agilityio commented Jul 27, 2017

I got an error on line 9:

react router custom getUserConfirmationReact DOM tree root should always have a node reference.

Have you faced this error yet?

@sashapwc

This comment has been minimized.

Copy link

@sashapwc sashapwc commented Jan 21, 2018

I found facebook/react#3298
Which led me to change line 8 to: setTimeout(() => ReactDOM.unmountComponentAtNode(modal),0);
With a mental note that when I upgrade from 15.6 to 16 that maybe I won't need the setTimeout

@vbullinger

This comment has been minimized.

Copy link

@vbullinger vbullinger commented Apr 11, 2018

I get an error that getUserConfirmation accepts zero parameters. As in: no message or callback. This is from react-router-dom.

Any ideas?

@mcmxc

This comment has been minimized.

Copy link

@mcmxc mcmxc commented Oct 31, 2018

I get an error that getUserConfirmation accepts zero parameters. As in: no message or callback. This is from react-router-dom.

Any ideas?

Could you please provide more details? This method works like a charm for me

@hakonkrogh

This comment has been minimized.

Copy link

@hakonkrogh hakonkrogh commented Dec 6, 2018

You could also leverage existing React modules to show dialogs in order not to mess with ReactDOM and cleanup yourself. By using @crystallize/react-dialog getUserConfirmation.jsx can look like this:

import { showConfirm } from '@crystallize/react-dialog';

export default async (message, callback) => {
  const answer = await showConfirm({
    body: message
  });

  callback(answer === 'ok');
};
@johnloven

This comment has been minimized.

Copy link

@johnloven johnloven commented Dec 11, 2018

How can you change the value of formIsHalfFilledOut after confirmation, so that that the UserConfirmation isn't opened again immediately?

It can be done by dispatching a Redux action from the withCleanup, but I don't use Redux. A top level React context Provider seems unable to pass any value to the UserConfirmation, probably since the node is rendered separately, so that doesn't work either.

Is it possible to pass a custom callback to getUserConfirmation in order to reset the Prompt?

@thekoolfunda

This comment has been minimized.

Copy link

@thekoolfunda thekoolfunda commented Apr 3, 2019

how this getUserConfirmation work? Will it not let the user redirect to any other URL, if callback(false) is returned?

@Sin9k

This comment has been minimized.

Copy link

@Sin9k Sin9k commented Mar 11, 2020

@thekoolfunda
getUserConfirmation prevent of changing URL address, but at the moment of showing confirm dialog the URL adress has already changed to the next URL and after callback(false) the URL returns to the privious state.

A lot of colleagues asked me to tell them how it works and i created a demo and short video with explanations, may be it will be usefull for someone too:

EN: https://youtu.be/ZE5I9RbMaGY
RU: https://youtu.be/qDJ2OMcz8is

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment