Options
The message to show in the confirmation dialog.
A boolean or a function that returns a boolean indicating
whether to block the navigation. If a function is provided, it will receive an
object with currentLocation and nextLocation properties.
function ImportantForm() {
let [value, setValue] = React.useState("");
// Block navigating elsewhere when data has been entered into the input
unstable_usePrompt({
message: "Are you sure?",
when: ({ currentLocation, nextLocation }) =>
value !== "" &&
currentLocation.pathname !== nextLocation.pathname,
});
return (
<Form method="post">
<label>
Enter some important data:
<input
name="data"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</label>
<button type="submit">Save</button>
</Form>
);
}
Wrapper around useBlocker to show a
window.confirmprompt to users instead of building a custom UI with useBlocker.The
unstable_flag will not be removed because this technique has a lot of rough edges and behaves very differently (and incorrectly sometimes) across browsers if users click addition back/forward navigations while the confirmation is open. Use at your own risk.