svelte-gesture

svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

Each recognizer is implemented as an action that emits custom events. To make the most of it you should combine it with Svelte's spring function.

Installation

npm install svelte-gesture

To get TypeScript working, add svelte-gesture/globals to the types field in your tsconfig.json

{
	"compilerOptions": {
		"types": ["svelte-gesture/globals"]
	}
}

Usage

<script>
	import { spring } from 'svelte/motion';
	import { drag } from 'svelte-gesture';

	let coords = spring({ x: 0, y: 0 });

	function handler({ detail }) {
		const {
			active,
			movement: [mx, my]
		} = detail;

		coords.set({
			x: active ? mx : 0,
			y: active ? my : 0
		});
	}
</script>

<div use:drag on:drag="{handler}" style:transform="translate({$coords.x}px, {$coords.y}px)" />

Simple example

More examples soon...

Actions

svelte-gesture exports several actions that can handle different gestures.

| Action | Description | | -------- | ------------------------------------------ | | drag | Handles the drag gesture | | move | Handles mouse move events | | hover | Handles mouse enter and mouse leave events | | scroll | Handles scroll events | | wheel | Handles wheel events | | pinch | Handles the pinch gesture |

License

MIT