https://github.com/wobsoriano/svelte-gesture

👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.
https://github.com/wobsoriano/svelte-gesture

directive drag gestures pinch scroll svelte wheel zoom

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wobsoriano/svelte-gesture
• Owner: wobsoriano
• Created: 2022-06-29T09:33:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-29T20:58:00.000Z (8 months ago)
• Last Synced: 2024-10-02T08:52:31.850Z (about 1 month ago)
• Topics: directive, drag, gestures, pinch, scroll, svelte, wheel, zoom
• Language: TypeScript
• Homepage:
• Size: 133 KB
• Stars: 36
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-gesture

[![npm (tag)](https://img.shields.io/npm/v/svelte-gesture?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/svelte-gesture) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/svelte-gesture?style=flat&colorA=000000&colorB=000000) ![NPM](https://img.shields.io/npm/l/svelte-gesture?style=flat&colorA=000000&colorB=000000)

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](https://svelte.dev/tutorial/spring) function.

## Installation

```bash

npm install svelte-gesture

```

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

```json

{

	"compilerOptions": {

		"types": ["svelte-gesture/globals"]

	}

}

```

## Usage

```html

	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

		});

	}



```


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