Stimulus Use TinyGesture

Tracks the user's gesture on an element using the TinyGesture library.

Installation

Using npm

1npm i stimulus-use-tinygesture

Using yarn

1yarn add stimulus-use-tinygesture

Reference

1useTinyGesture(controller, (options = {}))

controller : a Stimulus Controller (usually 'this')

options :

Option	Description	Default value
element	The element used to recognize user's gesture	The controller element
tinygesture	Constructor and Options
handlers	Listening to Gesture Events

Usage

1import { Controller } from '@hotwired/stimulus'
2import { useTinyGesture } from 'stimulus-use-tinygesture'
3
4class TappableController extends Controller {
5  connect() {
6    useTinyGesture(this, {
7      element: this.element,
8      tinygesture: {
9        // threshold: (type, self) => ...
10        // velocityThreshold: 10,
11        // disregardVelocityThreshold: (type, self) => ...
12        // ...
13      },
14      handlers: {
15        // tap
16        // doubletap
17        // swipeleft
18        // swiperight
19        // ...
20        tap: [this.tapHandler]
21      }
22    })
23  }
24
25  tapHandler(event, gesture) {
26    console.log(event)
27    console.log(gesture)
28  }
29}