Customisable prompt for React Router
npm install react-router-nav-prompt> 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:
``JSX
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 (
Are you sure you want to leave this page?
);
}
return (
:
`JSX
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 (
{({
blocked,
hidePrompt,
navigate,
}) => (
blocked
? (
Are you sure you want to leave this page?
) : (
onChange={(ev) => setEmail(ev.target.value)}
value={email}
/>
)
)}
);
};
`API
: React hook to control the visibility of prompt UI.
: 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): Set blocked to false & cancel the route navigation.
- navigate (function): Unblock & continue to the route to which navigation occurred.Implementation Notes
-
history.block` API might change in v5. See history#690Find any issues? API/features need improvement? Create an issue or hit me up @ @this_dane!
---
Made with ❤ by danedavid