react-router-nav-prompt
v0.4.1
Published
Customisable prompt for React Router
Downloads
8,505
Maintainers
Readme
react-router-nav-prompt
Simple component & hook primitives to provide customisable prompt messages when user tries to leave the page in React Router
Usage
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>
);
};
API
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)
: Setblocked
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#690
Contributing
Find any issues? API/features need improvement? Create an issue or hit me up @ @this_dane!
Made with ❤ by danedavid