UNPKG

@quintenkasteel/useswipe

Version:

A simple to use library that provides useSwipe hook for React that enables swipe gestures for touch screens.

65 lines (43 loc) 1.5 kB
# Getting Started with UseSwipe A simple to use library that provides useSwipe hook for React that enables swipe gestures for touch screens. ## Usage `import useSwipe from '@quintenkasteel/useswipe'` example without element `const swipe = useSwipe({})` example with element `const swipe = useSwipe(".header", true)` ## Props element: String DOM element where the swipe is enabled. default value is body. preventDefault: Bool Prevent all default events when moving. for example scrolling. onStart: () => {} function that will be fired on start of moving. (not yet in) onMove: () => {} function that will be fired on every move. (not yet in) onEnd: () => {} function that will be fired on end of moving. (not yet in) onCancel: () => {} function that will be fired on cancel of moving. (not yet in) ## Return Values direction: String Get the current swiping direction in uppercase. one of: "RIGHT" | "LEFT" | "DOWN" | "UP" distance: Number Get the swiped amount in pixels. startX: Number Get the starting X position in pixels. startY: Number Get the starting Y position in pixels. endX: Number Get the end X position in pixels. endY: Number Get the end Y position in pixels. startTime: Date Get the date at the beginning of the swipe. elapsedTime: Number Get the duration of the swipe in seconds. speed: Number Get the speed of the swipe isSwiping: Bool True when swiping.