Simple component & hook primitives to provide customisable prompt messages when user tries to leave the page in React Router
Installation: npm i --save react-router-nav-prompt
useNavPrompt:
import { useNavPrompt } from 'react-router-nav-prompt'; import Modal from 'your-component-library'; const FormComponent () => { const [email, setEmail] = useState(''); const { blocked, hidePrompt, navigate, } = useNavPrompt({ shouldBlock: Boolean(email), }); if (blocked) { return ( <Modal> <div> Are you sure you want to leave this page? </div> <button onClick={hidePrompt}>Stay & fill the form</button> <button onClick={navigate}>Continue without saving</button> </Modal> ); } return ( <div> <input type="text" onChange={(ev) => setEmail(ev.target.value)} value={email} /> </div> ); };<NavPrompt />:
import { NavPrompt } from 'react-router-nav-prompt'; import Modal from 'your-component-library'; const FormComponent () => { const [email, setEmail] = useState(''); const { blocked, hidePrompt, navigate, } = useNavPrompt({ shouldBlock: Boolean(email), }); return ( <NavPrompt> {({ blocked, hidePrompt, navigate, }) => ( blocked ? ( <Modal> <div>Are you sure you want to leave this page?</div> <button onClick={hidePrompt}>Stay & fill the form</button> <button onClick={navigate}>Continue without saving</button> </Modal> ) : ( <div> <input type="text" onChange={(ev) => setEmail(ev.target.value)} value={email} /> </div> ) )} </NavPrompt> ); };useNavPrompt: React hook to control the visibility of prompt UI. <NavPrompt/>: Component with render prop.
Parameters/Props (is an {} of):
shouldBlock (boolean): Whether route change should be blocked.
Return value/child parameters (is an {} of):
blocked (boolean): Route change is currently blocked. Show the prompt UI.hidePrompt (function): Setblockedto false & cancel the route navigation.navigate (function): Unblock & continue to the route to which navigation occurred.
history.blockAPI might change in v5. See history#690
Find any issues? API/features need improvement? Create an issue or hit me up @ @this_dane!
Made with ❤ by danedavid