https://github.com/sveltejs/gestures

Svelte actions for cross-platform gesture detection
https://github.com/sveltejs/gestures

Last synced: about 1 month ago
JSON representation

Svelte actions for cross-platform gesture detection

• Host: GitHub
• URL: https://github.com/sveltejs/gestures
• Owner: sveltejs
• License: other
• Created: 2019-03-05T22:27:43.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T00:59:36.000Z (over 1 year ago)
• Last Synced: 2024-04-14T16:06:25.751Z (2 months ago)
• Language: TypeScript
• Size: 40 KB
• Stars: 90
• Watchers: 9
• Forks: 7
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-svelte-resources - `@sveltejs/gestures` - (components and libraries / interaction)

README

        
# @sveltejs/gestures

A (work-in-progress) collection of gesture recognisers for Svelte components.

Each recogniser is implemented as an action that emits custom events. Pointer events are used where possible, falling back to mouse and touch events.

## tap ([demo](https://v3.svelte.technology/repl?version=3.0.0-beta.10&gist=ffbdb659f2c52c8510bec42af3ffb0d1))

This action fires a `tap` event when the user taps on an element with either a mouse or a finger (or other pointing device). If the pointer is down for more than 300ms, it doesn't count, unlike with `click` events.

Pressing the spacebar on a focused button will also fire a `tap` event. Taps on disabled form elements are disregarded.

The `event.detail` object has `x` and `y` properties corresponding to `clientX` and `clientY`. If the original event was a spacebar keypress, both are `null`.

```html

  import { tap } from '@sveltejs/gestures';

  function handler(event) {

    console.log(`the button was tapped at ${event.detail.x}, ${event.detail.y}`);

  }

  tap the button

```

TODO: `pan`, `swipe`, `rotate`, `pinch`, `press`

## License

[LIL](LICENSE)