vanilla-swipe
v2.4.1
Published
Tiny vanilla JS library to detect swipe direction.
Downloads
177,131
Maintainers
Readme
vanilla-swipe
Tiny vanilla JS library to detect swipe direction.
👉 Live demo.
Types
type ConstructorProps = {
element?: HTMLElement | null;
target?: HTMLElement | null;
delta?: number | 10;
directionDelta?: number | 0;
rotationAngle?: number | 0;
mouseTrackingEnabled?: boolean | false;
touchTrackingEnabled?: boolean | true;
preventDefaultTouchmoveEvent?: boolean | false;
preventTrackingOnMouseleave?: boolean | false;
onSwipeStart?: EventHandler;
onSwiping?: EventHandler;
onSwiped?: EventHandler;
onTap?: EventHandler;
};
type EventHandler = {
(e: Event, data: EventData): void;
};
type EventData = {
absX: number;
absY: number;
deltaX: number;
deltaY: number;
directionX: 'LEFT' | 'RIGHT' | 'NONE';
directionY: 'TOP' | 'BOTTOM' | 'NONE';
duration: number; // ms
velocity: number; // (px/ms)
};
Props
element
- target event triggertarget
- additionally target event trigger, if specified with the element, will be used by all handlers to trigger the actiondelta
- minimal distance inpx
before a swipe startsdirectionDelta
- minimum distance inpx
required for the direction to be reversed while swiping.rotationAngle
- rotation anglemouseTrackingEnabled
- enable mouse trackingtouchTrackingEnabled
- enable touch trackingpreventDefaultTouchmoveEvent
- prevent default touch events while touchingpreventTrackingOnMouseleave
- triggeredonSwiped
callback when the event loses the element's focusonSwipeStart
- triggered on swipe start (if thedelta
is passed)onSwiping
- triggered during swipeonSwiped
- triggered after swipeonTap
- triggered when the swipe value is less than the minimum distance (delta
)
Methods
init(): void
update(options: ConstructorProps): void
destroy(): void
- static
isTouchEventsSupported(): boolean
Install
npm install vanilla-swipe
Examples
import VanillaSwipe from 'vanilla-swipe';
const isTouchEventsSupported = VanillaSwipe.isTouchEventsSupported();
const VS = new VanillaSwipe({
element: document.getElementById('some-id'),
onSwiping: handler,
onSwiped: handler,
mouseTrackingEnabled: true,
});
VS.init();
function handler() {
console.log(...arguments); // -> Event, EventData
}
Run project
npm i
npm start
Tests
npm test
Coverage
npm run test:coverage