@types/hammerjs

Gesture recognition

This code sets up gesture recognition on an HTML element to detect various gestures such as pan and tap, and updates the element's text content with the type of gesture detected.

import Hammer from 'hammerjs';

const myElement = document.getElementById('myElement');
const mc = new Hammer(myElement);

mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

mc.on('panleft panright panup pandown tap press', function(ev) {
    myElement.textContent = ev.type + "!";
});

Custom gesture configuration

This code configures the swipe gesture to only recognize vertical movements and applies a translation transformation to the HTML element based on the swipe's vertical delta.

import Hammer from 'hammerjs';

const myElement = document.getElementById('myElement');
const mc = new Hammer(myElement);

mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

mc.on('swipeup swipedown', function(ev) {
    myElement.style.transform = `translateY(${ev.deltaY}px)`;
});

Event data handling

This code demonstrates how to handle pinch events and access event data such as the scale of the pinch and the center point of the gesture.

import Hammer from 'hammerjs';

const myElement = document.getElementById('myElement');
const mc = new Hammer(myElement);

mc.on('pinch', function(ev) {
    // Access event data like scale and center
    console.log(`Pinch scale: ${ev.scale}, center: ${ev.center}`);
});