fix: account for mousemove

src/index.js

@@ -1,16 +1,21 @@
 import React from 'react';
 
 export const useHovering = () => {
+  const ref = React.useRef();
   const [hovering, setHovering] = React.useState(false);
 
   const bind = React.useMemo(
     () => ({
+      ref,
       onMouseEnter: () => {
         setHovering(true);
       },
       onMouseLeave: () => {
         setHovering(false);
       },
+      onMouseMove: () => {
+        setHovering(true);
+      },
       onFocus: () => {
         setHovering(true);
       },
@@ -22,5 +27,31 @@ export const useHovering = () => {
     [],
   );
 
+  React.useEffect(() => {
+    const listener = e => {
+      const minX = ref.current.offsetLeft;
+      const maxX = minX + ref.current.offsetWidth;
+      const minY = ref.current.offsetTop;
+      const maxY = minY + ref.current.offsetHeight;
+
+      if (
+        !(
+          e.clientX >= minX &&
+          e.clientX <= maxX &&
+          e.clientY >= minY &&
+          e.clientY <= maxY
+        )
+      ) {
+        setHovering(false);
+      }
+    };
+
+    document.addEventListener('mousemove', listener);
+
+    return () => {
+      document.removeEventListener('mousemove', listener);
+    };
+  }, []);
+
   return [hovering, bind];
 };

types.d.ts

@@ -1,8 +1,10 @@
 declare function useHovering(): [
   boolean,
   {
+    ref: React.RefObject<any>;
     onMouseEnter: React.MouseEventHandler<any>;
     onMouseLeave: React.MouseEventHandler<any>;
+    onMouseMove: React.MouseEventHandler<any>;
     onFocus: React.FocusEventHandler<any>;
     onBlur: React.FocusEventHandler<any>;
     tabIndex: React.HTMLAttributes<any>['tabIndex'];