svelte-swipeable v1.0.9

svelte-swipeable

Lightweight library to handle swipe gestures in Svelte

Animation Component demo

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 Data

// 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>