From 40d6b9cf4bf3d47057bef64601943c3a1c6316fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Taneli=20Riihim=C3=A4ki?= <taneli.riihimaki@liveto.io>
Date: Sat, 2 Oct 2021 15:28:03 +0300
Subject: [PATCH] Add custom hook for using event listeners

---
 hooks/useEventListener.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 hooks/useEventListener.js

diff --git a/hooks/useEventListener.js b/hooks/useEventListener.js
new file mode 100644
index 0000000..2f6d82f
--- /dev/null
+++ b/hooks/useEventListener.js
@@ -0,0 +1,34 @@
+import { useRef, useEffect } from "react";
+
+/*
+  Hook for using event listeners
+
+  Example:
+  const handler = useCallback((e) => console.log(`X: ${e.clientX} Y: ${e.clientY}`), []);
+
+  useEventListener('click', handler);
+
+  NOTE! If you dont use 'useCallback' hook, the handler will change every render
+*/
+
+const useEventListener = (eventName, handler) => {
+  const handlerRef = useRef();
+
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]); // if the handler function changes get new reference
+
+  useEffect(
+    () => {
+      const currentHandler = (event) => handlerRef.current(event);
+      document.addEventListener(eventName, currentHandler);
+
+      return () => {
+        document.removeEventListener(eventName, currentHandler);
+      };
+    },
+    [eventName] // Re-run if eventName changes
+  );
+};
+
+export default useEventListener;