Make useHoverDirty controllable + reuse in useMouse

streamich · Mar 26, 2019 · 2b3dd23 · 2b3dd23
1 parent 28b5bc9
commit 2b3dd23
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 27 deletions.
diff --git a/src/useHoverDirty.ts b/src/useHoverDirty.ts
@@ -1,8 +1,8 @@
 import {useEffect, useState} from 'react';
 
 // kudos: https://usehooks.com/
-const useHoverDirty = (ref) => {
-  if (process.env.NODE_ENV !== 'production') {
+const useHoverDirty = (ref, enabled: boolean = true) => {
+  if (process.env.NODE_ENV === 'development') {
     if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
       throw new TypeError('useHoverDirty expects a single ref argument.');
     }
@@ -14,18 +14,18 @@ const useHoverDirty = (ref) => {
     const onMouseOver = () => setValue(true);
     const onMouseOut = () => setValue(false);
 
-    if (ref && ref.current) {
+    if (enabled && ref && ref.current) {
       ref.current.addEventListener('mouseover', onMouseOver);
       ref.current.addEventListener('mouseout', onMouseOut);
     }
 
     return () => {
-      if (ref && ref.current) {
+      if (enabled && ref && ref.current) {
         ref.current.removeEventListener('mouseover', onMouseOver);
         ref.current.removeEventListener('mouseout', onMouseOut);
       }
     };
-  }, []);
+  }, [enabled, ref]);
 
   return value;
 }

diff --git a/src/useMouse.ts b/src/useMouse.ts
@@ -1,5 +1,5 @@
 import {useState, useEffect, useRef, RefObject} from 'react';
-import useToggle from "./useToggle";
+import useHoverDirty from "./useHoverDirty";
 
 export interface State {
   docX: number;
@@ -13,8 +13,14 @@ export interface State {
 }
 
 const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): State => {
+  if (process.env.NODE_ENV === 'development') {
+    if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
+      throw new TypeError('useMouse expects a single ref argument.');
+    }
+  }
+
   const frame = useRef(0);
-  const [active, setActive] = useToggle(false);
+  const isHovered = useHoverDirty(ref, whenHovered);
   const [state, setState] = useState<State>({
     docX: 0,
     docY: 0,
@@ -26,23 +32,6 @@ const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): St
     elW: 0,
   });
 
-  useEffect(() => {
-    const enterHandler = () => setActive(true)
-    const leaveHandler = () => setActive(false)
-
-    if (whenHovered && ref && ref.current) {
-      ref.current.addEventListener("mouseenter", enterHandler, false);
-      ref.current.addEventListener("mouseleave", leaveHandler, false);
-    }
-
-    return () => {
-      if (whenHovered && ref && ref.current) {
-        ref.current.removeEventListener("mouseenter", enterHandler);
-        ref.current.removeEventListener("mouseleave", leaveHandler);
-      }
-    };
-  }, [whenHovered, ref]);
-
   useEffect(() => {
     const moveHandler = (event: MouseEvent) => {
       cancelAnimationFrame(frame.current);
@@ -67,17 +56,17 @@ const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): St
       });
     }
 
-    if (active || !whenHovered) {
+    if (isHovered || !whenHovered) {
       document.addEventListener('mousemove', moveHandler);
     }
 
     return () => {
-      if (active || !whenHovered) {
+      if (isHovered || !whenHovered) {
         cancelAnimationFrame(frame.current);
         document.removeEventListener('mousemove', moveHandler);
       }
     };
-  }, [active, whenHovered, ref])
+  }, [isHovered, whenHovered, ref])
 
   return state;
 }