react-goodbye v0.4.0

React GoodBye

A save reminder component for react router v4.

react-goodbye is a save reminder utility to prevent routing transition before you leave without saving changes.

Please check the demo page for more information.

Install

npm install --save react-goodbye

or you can use yarn:

yarn add react-goodbye

note: react-goodbye uses React 16.3 new context api under the hood. Therefore, only React v16.3+ are supported.

Usage

• Decorate your router provider from react-router using withGoodBye:

import { BrowserRouter } from 'react-router-dom';
import { withGoodBye } from 'react-goodbye';

const EnhancedRouter = withGoodBye(BrowserRouter);

ReactDOM.render(
  <EnhancedRouter>
    <App />
  </EnhancedRouter>,
  document.getElementById('root')
);

• Import GoodBye component under the page you want with save reminder:

import React from 'react';
import GoodBye from 'react-goodbye';

import Modal from './path/to/your/modal/component';

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialValue: props.initialValue,
      currentValue: props.initialValue
    };
  }
  render() {
    return (
      <div>
        <GoodBye when={this.state.initialValue !== this.state.currentValue}>
          {({ isShow, handleOk, handleCancel }) =>
            isShow && (
              <Modal>
                <h3>Settings Changed</h3>
                <p>
                  You change the page without saving any data. Do you want to
                  leave?
                </p>
                <button onClick={handleOk}>Yes</button>
                <button onClick={handleCancel}>No</button>
              </Modal>
            )
          }
        </GoodBye>
        <input
          type="input"
          value={this.state.currentValue}
          onChange={evt => this.setState({ currentValue: evt.target.value })}
        />
      </div>
    );
  }
}

API Reference

• withGoodBye
• Provider
• GoodBye

withGoodBye

withGoodBye uses higher order component pattern to inject the getUserConfirmation handle function prop on the react-router provider. Use this HoC to decorate the router providers like BrowserRouter, HashRouter or low-level Router:

import { withGoodBye } from 'react-goodbye';
import { Router } from 'react-router';

const EnhancedRouter = withGoodBye(Router);

ReactDom.render(
  <EnhancedRouter>
    <App />
  </EnhancedRouter>
);

Provider

If you prefer render props pattern, you can use this Provider component like so:

import { Provider as GoodByeProvider } from 'react-goodbye';
import { BrowserRouter } from 'react-router-dom';

ReactDom.render(
  <GoodByeProvider>
    {({ handleGetUserConfirm }) => (
      <BrowserRouter getUserConfirmation={handleGetUserConfirm}>
        <App />
      </BrowserRouter>
    )}
  </GoodByeProvider>
);

GoodBye

GoodBye is the consumer component of the GoodBye context. This component must be in the subtree of Provider or decorated router provider.

react-goodbye will handle all of the code logic for you. Use provided render props to show whatever you want (modal, lightbox, dialog, popup, etc)

License

MIT © xJkit