@adrianbielawski/use-swipe

useSwipe react hook

Description

Very easy to use react hook for detection of swipe length and quick swipe check on touch screen.

Technology

Created with TypeScript and React. Tested with Jest and React-testing-library.

Usage

$ 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>
    )
}

Props / Config

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)