use-navigation-prompt v1.0.2
React Use Navigation Prompt
A React Hook for blocking page navigation and displaying a prompt based on a condition.
Installation
Install the package from npm:
npm install use-navigation-prompt
Usage
import { useState } from 'react';
import useNavigationPrompt from 'use-navigation-prompt';
function App() {
const [isNavigationBlocked, setIsNavigationBlocked] = useState(false);
useNavigationPrompt(isNavigationBlocked);
return (
<div>
Navigation is: { !isNavigationBlocked ? "not" : "" } Blocked
<button onClick={() => setIsNavigationBlocked(prevIsNavigationBlocked => !prevIsNavigationBlocked)}>
Toggle
</button>
</div>
);
}
export default App;
Explanation
The useNavigationPrompt
hook can be used to block page navigation and display a prompt when a specific condition is met. The hook takes a single parameter, a boolean value indicating whether the navigation should be blocked or not.
In the example above, we initialize the isNavigationBlocked
state variable to false
using the useState
hook. We then pass this state variable to the useNavigationPrompt
hook. When the state value changes to true
, the hook will block the page navigation and display a prompt asking the user to confirm their intent to leave the page.
The prompt will be displayed by the browser and is customizable based on the user agent. The user can choose to proceed with the navigation or cancel it.
The example also includes a button that toggles the isNavigationBlocked
state, allowing you to simulate enabling or disabling the navigation prompt.
License
This project is licensed under the MIT License.