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.

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

Dependencies

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