Stimulus Use TinyGesture

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

Installation

Using npm

npm i stimulus-use-tinygesture

Using yarn

yarn add stimulus-use-tinygesture

Reference

useTinyGesture(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

import { Controller } from '@hotwired/stimulus'
import { useTinyGesture } from 'stimulus-use-tinygesture'

class TappableController extends Controller {
  connect() {
    useTinyGesture(this, {
      element: this.element,
      tinygesture: {
        // threshold: (type, self) => ...
        // velocityThreshold: 10,
        // disregardVelocityThreshold: (type, self) => ...
        // ...
      },
      handlers: {
        // tap
        // doubletap
        // swipeleft
        // swiperight
        // ...
        tap: [this.tapHandler]
      }
    })
  }

  tapHandler(event, gesture) {
    console.log(event)
    console.log(gesture)
  }
}