Prevent router transition component for react-router-dom; Like facebook when you are trying to leave page and post editor is not empty.
look at Example.
https://github.com/fadiquader/prevent-router-transition/blob/master/example/index.js
Install by yarn
yarn add prevent-router-transition
Or by npm
npm i prevent-router-transition
To use this component you should setup react-router-dom v4.
import React from 'react'
import { Link } from 'react-router-dom';
import PreventTransition from 'prevent-router-transition';
import 'rc-dialog/dist/rc-dialog.min.css';
import 'prevent-router-transition/lib/prevent-router-transition.css';
class Example extends React.Component {
state = {
value: ''
};
render() {
const { value } = this.state;
const preventTransition = !!value; // true if the value == ''
return (
<div>
<input type="text"
onChange={e => this.setState({ value: e.target.value })}
placeholder="Insert some text..."
/>
<br/>
<Link to={`/about`}>Go To About Page</Link>
<PreventTransition
when={preventTransition}
message="Do you want leave without finishing?" />
</div>
)
}
}
export default Example;| 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) |