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
3.3k Dec 12, 2022
44 Nov 4, 2022
2.9k Dec 29, 2022
3 May 18, 2022
183 Dec 24, 2022
4 May 3, 2022
14 Jan 3, 2023
70 Nov 24, 2022
2 Dec 28, 2021
70 Dec 15, 2022