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

Install by yarn
yarn add prevent-router-transition

Or by npm
npm i prevent-router-transition

Usage

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;

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)

Dependencies

1. react-router-dom
2. rc-dialog