Skip to content

👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.

Notifications You must be signed in to change notification settings

wobsoriano/svelte-gesture

Repository files navigation

svelte-gesture

npm (tag) npm bundle size NPM

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