diff --git a/docs/useBeforeUnload.md b/docs/useBeforeUnload.md index 9c4df021..438f0580 100644 --- a/docs/useBeforeUnload.md +++ b/docs/useBeforeUnload.md @@ -9,7 +9,7 @@ React side-effect hook that shows browser alert when user try to reload or close import {useBeforeUnload} from 'react-use'; const Demo = () => { - useBeforeUnload('Are you sure?'); + useBeforeUnload(); return null; }; diff --git a/src/__stories__/useBeforeUnload.story.tsx b/src/__stories__/useBeforeUnload.story.tsx index 4b0dc31f..989ee946 100644 --- a/src/__stories__/useBeforeUnload.story.tsx +++ b/src/__stories__/useBeforeUnload.story.tsx @@ -4,7 +4,7 @@ import {useBeforeUnload} from '..'; import ShowDocs from './util/ShowDocs'; const Demo = () => { - useBeforeUnload('Are you sure?'); + useBeforeUnload(); return (
diff --git a/src/useBeforeUnload.ts b/src/useBeforeUnload.ts index a244a450..26918055 100644 --- a/src/useBeforeUnload.ts +++ b/src/useBeforeUnload.ts @@ -2,15 +2,14 @@ import {useEffect} from "react"; const useBeforeUnload = (message?: string) => { useEffect(() => { - window.onbeforeunload = e => { - e.returnValue = message; - return message; + const beforeUnload = (e) => { + e.preventDefault(); + e.returnValue = message || ""; }; - return () => { - window.onbeforeunload = null; - return; - } + window.addEventListener("beforeunload", beforeUnload); + + return () => window.removeEventListener("beforeunload", beforeUnload); }, [message]); };