How to make a custom Prompt (using getUserConfirmation) for React Router v4

App.jsx

// 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')
)

getUserConfirmation.jsx

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