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>
    );
  }
}

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.

props	type	default	description
when	Boolean	false	Make render props `isShow` to be true or false when routing transition occurs.
alertBeforeUnload	Boolean	false	Turn on the browser alert. Technically, when you refresh or close browser window, only browser itself can detect and popup alert for you. If you want to remind the user when doing actions above, turn on this option.
alertMessage	String	''	Custom browser alert messages. Note that this option only works for IE.
conditionalPrompt	func		Custom callback to show the prompt conditionally based on the location. The function receives the location and you can return true to allow the transition or false to show the prompt.

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)

render props	type	default	description
isShow	Boolean	false	While `when` prop is true, `isShow` will be true when routing transition occurs. You can put your dialog component here.
handleOk	function		Allow routing transition and make `isShow` to be false again.
handleCancel	function		Block routing transition and make `isShow` to be false again.
handlePass	function		Low-level api under `handleOk` and `handleCancel`; pass true or false will allow/block routing transitions. Use this function to do your additional actions.

xJkit/react-goodbye

xJkit

Reviews

Repository Details