Handles the beforeunload
window event.
- Use the
useRef()
hook to create a ref for the callback function,fn
. - Use the
useEffect()
hook andEventTarget.addEventListener()
to handle the'beforeunload'
(when the user is about to close the window). - Use
EventTarget.removeEventListener()
to perform cleanup after the component is unmounted.
const useUnload = fn => { const cb = React.useRef(fn); React.useEffect(() => { const onUnload = cb.current; window.addEventListener('beforeunload', onUnload); return () => { window.removeEventListener('beforeunload', onUnload); }; }, [cb]); };
Examples
const App = () => { useUnload(e => { e.preventDefault(); const exit = confirm('Are you sure you want to leave?'); if (exit) window.close(); }); return <div>Try closing the window.</div>; }; ReactDOM.render(<App />, document.getElementById('root'));
Recommended snippets
Handles the event of clicking inside the wrapped component.
Handles the event of clicking outside of the wrapped component.
Returns a stateful value, persisted in
localStorage
, and a function to update it.