prevent-router-transition component
Prevent router transition component for react-router-dom; Like facebook when you are trying to leave page and post editor is not empty.
Screenshot
look at Example.
https://github.com/fadiquader/prevent-router-transition/blob/master/example/index.js
Install
yarn add prevent-router-transition
Usage
To use this component you should setup react-router-dom v4.
;;;; Component state = value: '' ; { const value = thisstate; const preventTransition = !!value; // true if the value == '' return <div> <input type="text" onChange= this placeholder="Insert some text..." /> <br/> <Link to=`/about`>Go To About Page</Link> <PreventTransition when=preventTransition message="Do you want leave without finishing?" /> </div> };
API
name | type | default | description |
---|---|---|---|
when | Boolean | False | when=true, will prevent transition |
title | Node | String | Leave Page? | Modal title, if title=null, modal header will be hidden |
message | Node | String | Do you want to leave without finishing? | Modal message |
okText | Node | String | Stay on this page | ok button label |
cancelText | Node | String | Leave this page | cancel button label |
wrapClassName | String | additional className for modal | |
width | Integer | 400 | Modal width |
closable | Boolean | true | show / hide close icon |
callback | Function(handleType=('ok' | 'cancel') | Callback when handle modal (ok or cancel) |