@types/hammerjs

What is @types/hammerjs?

The @types/hammerjs package provides TypeScript type definitions for Hammer.js, a popular library for handling touch gestures. By using these type definitions, developers can get compile-time type checking and IntelliSense support in TypeScript projects when working with Hammer.js.

What are @types/hammerjs's main functionalities?

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

Other packages similar to @types/hammerjs

zingtouch

ZingTouch is a modern JavaScript touch gesture library that provides custom, complex touch gestures. It is similar to Hammer.js in that it allows for the creation of touch-based events but offers a different API and additional custom gestures.

alloyfinger

AlloyFinger is a tiny gesture library that offers a simple API for handling touch events. It is lighter than Hammer.js and provides similar functionalities but with a focus on performance and a smaller footprint.

interact.js

Interact.js is a JavaScript library for draggable, resizable, and multi-touch gestures. It is more comprehensive than Hammer.js, offering additional features like drag and drop and resizing, but it may be more complex to use for simple gesture recognition tasks.

README

Installation

npm install --save @types/hammerjs

Summary

This package contains type definitions for Hammer.js (http://eightmedia.github.com/hammer.js/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/hammerjs/v1.

Additional Details

• Last updated: Tue, 06 Jul 2021 20:33:10 GMT
• Dependencies: @types/jquery
• Global values: Hammer, HammerDirectionType, HammerInstance, HammerPointerType, HammerTouchEventState

Credits

These definitions were written by Boris Yankov, and Drew Noakes.