React component and hook which listens to the beforeunload window event.
npm install react-beforeunloadListen to the beforeunload window event in React.
``jsx`
useBeforeunload(handler);
#### Parameters
- handler optional function to be called with BeforeUnloadEvent when beforeunload event is fired.
Passing a non-function value will disable the event listener.
#### Example
##### Simple
`jsx
import { useBeforeunload } from "react-beforeunload";
const Example = (props) => {
useBeforeunload((event) => event.preventDefault());
...
};
`
##### Conditional
`jsx
import { useBeforeunload } from "react-beforeunload";
const Example = (props) => {
const [value, setValue] = useState("");
useBeforeunload(value !== "" ? (event) => event.preventDefault() : null);
// or
useBeforeunload(value !== "" && () => true);
...
};
`
`jsx`
#### Props
- onBeforeunload function to be called with BeforeUnloadEvent when beforeunload event is fired.
#### Example
`jsx
import { Beforeunload } from "react-beforeunload";
class Example extends React.Component {
state = { value: "" };
render() {
return (
<>
{this.state.value !== "" && (
)}
value={this.state.value}
/>
);
}
}
`
:information_source: The Beforeunload component will render any children passed as-is, so it can be used as a wrapper component:
`jsx`
> :warning: Some browsers used to display the returned string in the confirmation dialog, enabling the event handler to display a custom message to the user. However, this is deprecated and no longer supported in most browsers.
To display a custom message in the triggered dialog box, return a string in the passed event handler function.
With useBeforeunload hook:
`jsx`
useBeforeunload(() => "You’ll lose your data!");
With Beforeunload component:
`jsx``