svelte-gesture

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