A React hook that uses the onbeforeunload (beforeunload) event and tracks when the user has been Refreshed or Canceled the default browser message. It is impossible to track if the user has left the page and is not a good idea to execute code after that.
npm i @garage-panda/use-before-unload
import React from "react";
import { useBeforeUnload } from "@garage-panda/use-before-unload";
function App() {
const setEnabledBeforeUnload = useBeforeUnload({
initEnable: false, // do you need to be enabled by default
onRefresh: () => {
// the page has been refreshed (the user has clicked Reload)
},
onCancel: () => {
// the user has clicked Cancel
}
});
React.useEffect(() => {
setEnabledBeforeUnload(true); // you can dynamically enable or disable the beforeunload event
if (!sessionStorage.length) {
// the only way to know that the user has land on your site (and has not refreshed the page)
}
}, []);
}Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
If you like what you see, feel free to support us!
