All Projects → xJkit → React Goodbye

xJkit / React Goodbye

Licence: mit
A save reminder component for react router v4+.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Goodbye

Flagged
Feature Flags for React made easy with hooks, HOC and Render Props
Stars: ✭ 97 (-19.17%)
Mutual labels:  higher-order-component, render-props
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (+44.17%)
Mutual labels:  higher-order-component, render-props
Use Url State
Lift a React component's state into the url
Stars: ✭ 154 (+28.33%)
Mutual labels:  higher-order-component, render-props
Formik
Build forms in React, without the tears 😭
Stars: ✭ 29,047 (+24105.83%)
Mutual labels:  higher-order-component, render-props
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-14.17%)
Mutual labels:  react-router-v4
React Event
Declarative way to handle events outside / inside of React Component.
Stars: ✭ 90 (-25%)
Mutual labels:  higher-order-component
Perf Hoc
(Deprecated) Visualize and detect unnecessary rendering and performance issues in React.
Stars: ✭ 87 (-27.5%)
Mutual labels:  higher-order-component
React Dashboard
🔥React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) 🔥
Stars: ✭ 1,268 (+956.67%)
Mutual labels:  react-router-v4
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-5%)
Mutual labels:  higher-order-component
React Mobx Firebase Authentication
🔥Boilerplate Project for Authentication with Firebase in React and MobX
Stars: ✭ 111 (-7.5%)
Mutual labels:  react-router-v4
Squid Tracks
An Unofficial Desktop Client for Splatnet2
Stars: ✭ 100 (-16.67%)
Mutual labels:  react-router-v4
React Sentinel
React Component that abstracts away requestAnimationFrame, allowing you to set props by monitoring anything in the document!
Stars: ✭ 95 (-20.83%)
Mutual labels:  render-props
React Firebase
React bindings for Firebase
Stars: ✭ 104 (-13.33%)
Mutual labels:  higher-order-component
React Paginating
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
Stars: ✭ 89 (-25.83%)
Mutual labels:  render-props
Koa React Universal
lightweight React-Koa2 universal boilerplate, only what is essential
Stars: ✭ 112 (-6.67%)
Mutual labels:  react-router-v4
Cra Boilerplate
Up to date: This project is an Create React App - v2.1.1 boilerplate with integration of Redux, React Router, Redux thunk & Reactstrap(Bootstrap v4)
Stars: ✭ 87 (-27.5%)
Mutual labels:  react-router-v4
React Video Renderer
Build custom video players effortless
Stars: ✭ 100 (-16.67%)
Mutual labels:  render-props
Calendarx
📅 Your go-to, prescribed, Calendar component for React
Stars: ✭ 110 (-8.33%)
Mutual labels:  render-props
React Sortable Hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Stars: ✭ 9,747 (+8022.5%)
Mutual labels:  higher-order-component
React Easy Start
A lightweight ant-design-pro based on create-react-app.
Stars: ✭ 102 (-15%)
Mutual labels:  react-router-v4

React GoodBye

A save reminder component for react router v4.

npm version circle ci coverage license mit

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

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

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.

License

MIT © xJkit

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].