svelte-swipeable
v1.0.9
Published
Svelte swipe gesture handler
Downloads
115
Maintainers
Readme
svelte-swipeable
Lightweight library to handle swipe gestures in Svelte
Installation
npm i svelte-swipeable
Animation component
import { Animate } from 'svelte-swipeable';
<Animate
direction=any
stiffness=0.2
damping=0.2
willReturn=true
momentum=0.2
options={options}
swipeUp={hanldeSwipe}>
<div>Content</div>
</Animate>
Events
| Event | Triggered | | :--------- | :------------------------- | | swipeUp | After swiping up | | swipeDown | After swiping down | | swipeRight | After swiping right | | swipeLeft | After swiping left | | swipeStart | After mousedown on element | | swipeMove | After moving element | | swipeEnd | After mouseup on element |
Event Data
| Data | Definition | | :-------- | :-------------------------------------------- | | x | Coordinate of new X | | y | Coordinate of new Y | | initial | Object containing initial x and y coordinates | | direction | Object containing x direction and y direction |
// Assuming a swipe up of 200px
function handleSwipe(event) {
console.log(event.detail.initial.y); //0
console.log(event.detail.y); //200
console.log(event.detail.direction.y); //up
}
Options
These thresholds will take effect on all direction-specific events. Default is 0px.
let options = {
threshX: 100, // threshold in x before event is triggered (px)
threshY: 200 // threshold in y before event is triggered (px)
};
Svelte Action Usage
import swipe from 'svelte-swipeable';
<div use:swipe="{options}" on:swipeUp="{handleSwipe}">
Content
</div>