Very easy to use react hook for detection of swipe length and quick swipe check on touch screen.
Created with TypeScript and React. Tested with Jest and React-testing-library.
$ npm i @adrianbielawski/use-swipe
import useSwipe from '@adrianbielawski/use-swipe'
const YourComponent = () => {
const swipeRef = useSwipe(handleSwipe, handleSwipeEnd)
const handleSwipe = (x: number, y: number) => {
console.log(x, y)
}
const handleSwipeEnd = (x: number, y: number, isQuick: boolean) => {
console.log(x, y, isQuick)
}
return (
<div ref={swipeRef}>
your content here
</div>
)
}
All must be passed as ordered below
x, y - swipe lendth
isQuick - was the swipe quick and short enough
Name | Type | required | Description |
---|---|---|---|
onSwipe | (x: number, y: number) => void | true | Called while swiping |
onSwipeEnd | (x: number, y: number, isQuick: boolean) => void | true | Called when swipe has ended |
onSwipeStart | (x: number, y: number, isQuick: boolean) => void | false | Called when swipe has ended |
stopPropagation | boolean, default true | false | if true, e.stopPropagation is called on every events |
quickSwipeDuration | number, default 300 | false | max time of swipe to be considered as quick (in miliseconds) |
quickSwipeDistance | number, default 50 | false | min length of swipe to be considered as quick (in miliseconds) |