2.0.0 • Published 2 years ago

stimulus-use-tinygesture v2.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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 :

OptionDescriptionDefault value
elementThe element used to recognize user's gestureThe controller element
tinygestureConstructor and Options
handlersListening 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)
  }
}