fix: useOnClickOutside event handlers

* Fix #3

* Fix #3 with a general solution

* Clean Up

src/components/Modal/index.js

@@ -43,7 +43,7 @@ export default function Modal({ stripeKey }) {
 
   const ref = useRef()
 
-  useOnClickOutside(ref, closeModal)
+  useOnClickOutside(ref, closeModal, open)
 
   if (stripeError) {
     console.error(stripeError)

src/hooks/useOnClickOutside.js

@@ -1,21 +1,23 @@
 import { useEffect } from 'react'
 
-export default function useOnClickOutside(ref, handler) {
+export default function useOnClickOutside(ref, handler, open) {
+  const clickEvent = 'ontouchstart' in window ? 'touchstart' : 'mousedown'
+
   useEffect(() => {
     const listener = event => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return
-      }
+      if (ref.current.contains(event.target)) return
 
       handler(event)
     }
 
-    document.addEventListener('mousedown', listener)
-    document.addEventListener('touchstart', listener)
+    if (open) {
+      document.addEventListener(clickEvent, listener)
+    } else {
+      document.removeEventListener(clickEvent, listener)
+    }
 
     return () => {
-      document.removeEventListener('mousedown', listener)
-      document.removeEventListener('touchstart', listener)
+      document.removeEventListener(clickEvent, listener)
     }
-  }, [ref, handler])
+  }, [ref, handler, open])
 }