- Notifications
You must be signed in to change notification settings - Fork4
A save reminder component for react router
License
xJkit/react-goodbye
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 thedemo page for more information.
npm install --save react-goodbye
or you can useyarn:
yarn add react-goodbye
note: react-goodbye uses React 16.3 new context api under the hood. Therefore, only React v16.3+ are supported.
- Decorate your router provider from react-router using
withGoodBye:
import{BrowserRouter}from'react-router-dom';import{withGoodBye}from'react-goodbye';constEnhancedRouter=withGoodBye(BrowserRouter);ReactDOM.render(<EnhancedRouter><App/></EnhancedRouter>,document.getElementById('root'));
- Import
GoodByecomponent under the page you want with save reminder:
importReactfrom'react';importGoodByefrom'react-goodbye';importModalfrom'./path/to/your/modal/component';classPageextendsReact.Component{constructor(props){super(props);this.state={initialValue:props.initialValue,currentValue:props.initialValue};}render(){return(<div><GoodByewhen={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><buttononClick={handleOk}>Yes</button><buttononClick={handleCancel}>No</button></Modal>)}</GoodBye><inputtype="input"value={this.state.currentValue}onChange={evt=>this.setState({currentValue:evt.target.value})}/></div>);}}
withGoodBye useshigher order component pattern to inject thegetUserConfirmation handle function prop on the react-router provider. Use this HoC to decorate the router providers likeBrowserRouter,HashRouter or low-levelRouter:
import{withGoodBye}from'react-goodbye';import{Router}from'react-router';constEnhancedRouter=withGoodBye(Router);ReactDom.render(<EnhancedRouter><App/></EnhancedRouter>);
If you preferrender props pattern, you can use thisProvider component like so:
import{ProviderasGoodByeProvider}from'react-goodbye';import{BrowserRouter}from'react-router-dom';ReactDom.render(<GoodByeProvider>{({ handleGetUserConfirm})=>(<BrowserRoutergetUserConfirmation={handleGetUserConfirm}><App/></BrowserRouter>)}</GoodByeProvider>);
GoodBye is the consumer component of the GoodBye context. This component must be in the subtree ofProvider or decorated router provider.
| props | type | default | description |
|---|---|---|---|
| when | Boolean | false | Make render propsisShow to be true or false when routing transition occurs. |
| alertBeforeUnload | Boolean | false | Turn on the browser alert. Technically, when yourefresh orclose 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 forIE. |
| 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 providedrender props to show whatever you want (modal, lightbox, dialog, popup, etc)
| render props | type | default | description |
|---|---|---|---|
| isShow | Boolean | false | Whilewhen prop is true,isShow will be true when routing transition occurs. You can put your dialog component here. |
| handleOk | function | Allow routing transition and makeisShow to befalse again. | |
| handleCancel | function | Block routing transition and makeisShow to befalse again. | |
| handlePass | function | Low-level api underhandleOk andhandleCancel; passtrue orfalse will allow/block routing transitions. Use this function to do your additional actions. |
MIT ©xJkit
About
A save reminder component for react router