React hook to install a window.onbeforeunload handler and control it inside a component.
npm i use-before-unload
Just use it in any component that you want to prevent a reload (or tab close) with. You can provide a string or a function as an argument to the hook.
Example:
const ComponentThatControlsUnload = ({ children }: Props) => {
useBeforeUnload('Really leave?');
return children;
};Note that the text you provide is not shown in most modern browsers.
When using a function it gets passed the beforeunload Event. If you return a truthy value (which can be a string) the page reload will be suppressed:
const ComponentThatControlsUnload = ({ children }: Props) => {
useBeforeUnload(evt => {
/* Do some checks here if you like */
return true; // Suppress reload
});
return children;
};useBeforeUnload(value: ((evt: BeforeUnloadEvent) => any) | string)MIT