jestures

jestures

A (hopefully it stays) small web gesture library.

Installing

npm install jestures -S

yarn jestures

Usage

on('swipe')((swipeEvent) => { console.log('swiped ', swipeEvent.detail.direction) })

on

eventName -> callback -> target -> off The on function is the only exposed function. See Gestures for the gesture events that can be listened for.

Gestures

tap

The tap event is what is wanted most of the time you want to react to a user 'click' on an element. It bypasses the usual 300 millisecond delay and makes your app feel more responsive.

const offTap = on('tap')((tapEvent) => {
  console.log(`just ${swipeEvent.type} it in. `)
  offTap()
})

double-tap

The double-tap event is fired when the user taps twice in succession within 300ms. It should be noted that a double-tap event will be preceded by two tap events.

const offDoubleTap = on('double-tap')((tapEvent) => {
  console.log(`just ${swipeEvent.type} it in. `)
  offDoubleTap()
})

single-tap

There may be occasions where a single tap needs to be distinguished from a double-tap. Usually, this only happen when a single tap and a double-tap each have distinctly different meanings and different actions need to be taken for each of them respectively. In those case, using the tap event would be less helpful. Instead, use the single-tap which uses the default experience of a 300ms delay before firing the event to ensure the tap in not just the first tap of a double tap gesture.

const offSingleTap = on('single-tap')((singleTapEvent) => {
  console.log(`This is ${singleTapEvent.type}`)
  offSingleTap()
})

swipe

The swipe event fires whenever the user moves a touch more than 50px in either ordinal direction. The event includes a detail object with a direction property that has a value of either up, down, left, or right depending on which direction was the greatest.

const offSwipe = on('swipe')((swipeEvent) => {
  console.log('swiped ', swipeEvent.detail.direction)
  offSwipe()
})

pinch

The pinch event fires when a touchmove event happen with exactly two touch points originating from the same target element. The pinch event also has a detail object with a distance property that gives the distance between the two touch points. This is useful to map the scale of an element to the motion and growth of the gesture, or to determine whether the gesture is pinching - the distance between the touch points is diminishing - or spreading - the distance between touch points is growing.