From 7f5d0a7a5c706230c2adf9e5351e9841a26aa356 Mon Sep 17 00:00:00 2001
From: Vina Melody <vina_melody@yahoo.com>
Date: Mon, 5 Oct 2020 22:53:24 +0800
Subject: [PATCH] Add useUnload

---
 snippets/useUnload.md | 48 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 snippets/useUnload.md

diff --git a/snippets/useUnload.md b/snippets/useUnload.md
new file mode 100644
index 000000000..293287f49
--- /dev/null
+++ b/snippets/useUnload.md
@@ -0,0 +1,48 @@
+---
+title: useUnload
+tags: visual,ref,effect,beginner
+---
+
+A hook that listens to `beforeunload` event and trigger the default prompt when the user is leaving or closing the browser's session
+
+- Create a custom hook that takes a function on what do you want to do when the event is triggered
+- Use the `React.useRef()` hook to create a `ref` for your function
+- Use the `React.useEffect()` hook to add the listener and clean up the `beforeunload` event.
+
+```js
+// unload.js
+import { useRef, useEffect } from 'react'
+
+const useUnload = (fn) => {
+  const cb = useRef(fn)
+  useEffect(() => {
+    const onUnload = cb.current
+      window.addEventListener('beforeunload', onUnload)
+      return () => {
+        window.removeEventListener('beforeunload', onUnload)
+      }
+  }, [cb])
+}
+
+export default useUnload
+
+```
+To use this in a global level, apply it in `App.js`
+
+```js
+// App.js
+import useUnload from './unload'
+
+function App {
+
+  useUnload((e) => {
+    e.preventDefault() // Required for Firefox
+    e.returnValue = ''
+    delete e.returnValue
+  })
+
+  return (
+    // Your app
+  )
+}
+```