Feat: Add mouse swipe event support (#4)

* Feat: Add mouse swipe event support

* Update readme

README.md

@@ -2,7 +2,7 @@
 
 [![NPM](https://img.shields.io/npm/v/use-swipe-hook.svg)](https://www.npmjs.com/package/use-swipe-hook)
 
-> A simple and easy to use tiny library that provides useSwipe hook to use with React that enables swipe gestures for touch screens
+> A simple and easy to use tiny library that provides useSwipe hook to use with React that enables swipe gestures for touch screens & non-touch screens via mouse events
 
 ## Install
 
@@ -23,7 +23,7 @@ function MyAwesomeComponent() {
   return (
     <div className="App">
       <h1>use-swipe-hook demo</h1>
-      <h2>Works on touch devices</h2>
+      <h2>Works on both touch & non touch devices (by dragging mouse over the container)</h2>
       <div className="swipeContainer" ref={swipeContainerRef}>
         {direction
           ? `You have swiped ${direction}`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-swipe-hook",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A simple and easy to use tiny library that provides useSwipe hook to use with React that enables swipe gestures for touch screens",
   "main": "lib/index.umd.js",
   "browser": "lib/index.umd.js",

src/useSwipe.js

@@ -19,14 +19,26 @@ const useSwipe = ({ ref, thresholdPX = 5 }) => {
   React.useEffect(() => {
     const currentElement = ref.current;
     if (currentElement) {
-      currentElement.addEventListener('touchstart', handleTouchStart);
-      currentElement.addEventListener('touchend', handleTouchEnd);
+      if (isTouchDevice()) {
+        currentElement.addEventListener('touchstart', handleTouchStart);
+        currentElement.addEventListener('touchend', handleTouchEnd);
+      }
+      else {
+        currentElement.addEventListener('mousedown', handleMouseDown);
+        currentElement.addEventListener('mouseup', handleMouseUp);
+      }
     }
 
     return () => {
       if (currentElement) {
-        currentElement.removeEventListener('touchstart', handleTouchStart);
-        currentElement.removeEventListener('touchend', handleTouchEnd);
+        if (isTouchDevice()) {
+          currentElement.removeEventListener('touchstart', handleTouchStart);
+          currentElement.removeEventListener('touchend', handleTouchEnd);
+        }
+        else {
+          currentElement.removeEventListener('mousedown', handleMouseDown);
+          currentElement.removeEventListener('mouseup', handleMouseUp);
+        }
       }
     }
   }, [ref]);
@@ -43,7 +55,19 @@ const useSwipe = ({ ref, thresholdPX = 5 }) => {
     }
   }
 
+  function handleMouseDown(event) {
+    setX1(event.clientX);
+    setY1(event.clientY);
+  }
+
+  function handleMouseUp(event) {
+    setX2(event.clientX);
+    setY2(event.clientY);
+  }
+
   return direction;
-}
+};
+
+const isTouchDevice = () => ('ontouchstart' in window);
 
 export default useSwipe;