react-router-guard-dirty-state
Guard unsaved / dirty componets (usually containing forms) by issuing alert when leaving the component both by closing window (onbeforeunload) and / or navigating away by using react-roter routes.
About
This is higher order component for React (DOM) to let end users know that view they are about to leave has dirty state.
Leaving means
- navigating away from a route via react-router 4.
- closing browser tab / window altogether
This helper was put together for augmenting 1st case as react-router <Promt>
is fine and dandy, but does not cover closing browser window. However this HOC can be used also with generic components / containers, where no routing is used.
By dirty state it is usually (and also here) meant when some form data is changed and unsaved. But it can be any state that is not resolved by user before closing the window or navigating away from the route.
Install
npm install react-router-guard-dirty-state --save-dev
Usage
ES2015 (ES6)
;
CommonJS
const guardDirtyState = default;
Decorate
/** * @param * @param */ReactComponent
Props
void
On all cases where state become dirty issue this.props.guardDirtySetActive(true)
.
On all cases where state becomes pristine (form is saved or reverted) issue this.props.guardDirtySetActive(false)
.
When leaving page while dirty is active user will get promted.
bool guardDirtyIsActive
This prop reflects current dirty
state. Basically it means that issuing this.props.guardDirtySetActive(isDirty)
where isDirty
differs from previous state the component will receive prop update for guardDirtyIsActive
. Do whatever you want with this.props.guardDirtyIsActive
. Of course prop will be pushed only on dirty state change, not on every guardDirtySetActive()
.
Example shows simple case where SomeComponent
is
is under <Router>
tree (any level deep as react-router
4 works this way now) and we can use this prop to set wether <Prompt />
should run on route change.
Note that receiving guardDirtyIsActive
prop can be turned off by passing false
to HOC if you do not use it (you do not use routes, or use some form management package for React that already handles dirty
in component-space), which saves React reconciliation cycles.
falseSomeComponent;
Example
'use strict'; import React Component from 'react';import PropTypes from 'prop-types';import Prompt from 'react-router-dom';import guardDirtyState from 'react-router-guard-dirty-state'; static propTypes = guardDirtySetActive: PropTypesfunc guardDirtyIsActive: PropTypesbool children: PropTypesnode ; static defaultProps = guardDirtyIsActive: false ; { ; thisstate = formValues: name: '' surname: '' ; thishandleFormChange = thishandleFormChange; thishandleFormSubmit = thishandleFormSubmit; thissetFormDirty = thissetFormDirty; } { if typeof thispropsguardDirtySetActive === 'function' thisprops; } { this; const target = evtarget; const value = targettype === 'checkbox' ? targetchecked : targetvalue; const name = targetname; this; } { const formValues = thisstate; ; ev; this; } { const formValues = thisstate; return <div> <h1>'Submit your name and surname form'</h1> <hr/> <form = > <label> 'Name:' <input ="text" ="name" = = /> </label> <label> 'Surname:' <input ="text" ="surname" = = /> </label> <input ="submit" ="Submit" /> </form> <Prompt = ="Changes you made may not be saved / There is unsaved data. Are you sure you want to leave this page?" /> thispropschildren </div> ; } SomeComponent;
Building
npm run build:dev
npm run build:prod
Testing
N/A
Todo
Copy possible static methods using hoist-non-react-statics