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