diff --git a/README.md b/README.md
index 080ffd7..f8808d8 100644
--- a/README.md
+++ b/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 (
use-swipe-hook demo
-
Works on touch devices
+
Works on both touch & non touch devices (by dragging mouse over the container)
{direction
? `You have swiped ${direction}`
diff --git a/package-lock.json b/package-lock.json
index eb7cbb8..7e78a5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "use-swipe-hook",
- "version": "1.0.4",
+ "version": "1.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index a7074b1..4ba94e1 100644
--- a/package.json
+++ b/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",
diff --git a/src/useSwipe.js b/src/useSwipe.js
index 81ad6bc..c75dc7f 100644
--- a/src/useSwipe.js
+++ b/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;
\ No newline at end of file