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

Latest version **0.1.4** (published 2024-02-29) · 0 weekly downloads

## Install

```sh
npm install svelte-gesture
pnpm add svelte-gesture
yarn add svelte-gesture
bun add svelte-gesture
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2024-02-29 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wobsoriano |

## Links

- npm: https://www.npmjs.com/package/svelte-gesture
- npm.io page: https://npm.io/package/svelte-gesture

## Dependencies (1)

- [@use-gesture/vanilla](https://npm.io/package/@use-gesture/vanilla.md) ^10.3.0

## Recent versions

- 0.1.4 (latest) — 2024-02-29
- 0.1.3 — 2022-12-12
- 0.1.2 — 2022-06-29
- 0.1.1 — 2022-06-29
- 0.1.0 — 2022-06-29
- 0.0.1 — 2022-06-29

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

<p align="middle">
  <a href="https://stackblitz.com/edit/vitejs-vite-9squm1?file=src/App.svelte"><img src="https://i.imgur.com/7myz7Tt.gif" width="400"/></a>
</p>

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

---
_Source: https://npm.io/package/svelte-gesture · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._