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)
  }
}