# Hammer.js — Multi-Touch Gesture Recognition Library

> A JavaScript library for detecting touch gestures like tap, swipe, pinch, and rotate in web and mobile applications.

## Install

Save as a script file and run:

# Hammer.js — Multi-Touch Gesture Recognition Library

## Quick Use
```bash
npm install hammerjs
```
```js
import Hammer from 'hammerjs';
const el = document.getElementById('app');
const mc = new Hammer(el);
mc.on('swipeleft swiperight', (ev) => console.log(ev.type));
```

## Introduction
Hammer.js adds multi-touch gesture recognition to web applications with a small footprint. It handles tap, double-tap, swipe, press, pinch, rotate, and pan events across desktop and mobile browsers with a unified API.

## What Hammer.js Does
- Recognizes tap, double-tap, swipe, press, pan, pinch, and rotate gestures
- Normalizes touch and pointer events across browsers and devices
- Supports simultaneous gesture recognition with configurable priorities
- Provides velocity and direction data for each recognized gesture
- Works with mouse, touch, and pointer events out of the box

## Architecture Overview
Hammer.js wraps the browser's native touch, mouse, and pointer events into a unified input layer. Recognizers run in sequence on each input cycle, evaluating whether their gesture pattern matches. When a recognizer triggers, it emits an event with computed properties like velocity, direction, distance, and scale. Multiple recognizers can run simultaneously or be configured to require failure of another before activating.

## Self-Hosting & Configuration
- Install via npm or include the UMD bundle from a CDN
- Create a Manager instance on any DOM element to start listening
- Configure recognizer thresholds like `threshold`, `pointers`, and `direction`
- Use `requireFailure()` to set priority between competing recognizers
- Set `domEvents: true` to also fire standard DOM events for delegation

## Key Features
- Tiny library (~3 KB gzipped) with zero dependencies
- Built-in recognizers cover all standard touch gestures
- Custom recognizer API for defining application-specific gestures
- Per-element manager instances allow different gesture configs per component
- Velocity and direction tracking for physics-based UI interactions

## Comparison with Similar Tools
- **interact.js** — heavier, adds drag-and-drop and resizing; Hammer.js focuses purely on gesture recognition
- **ZingTouch** — newer alternative with a similar API but smaller community
- **AlloyFinger** — lighter but fewer built-in recognizers and less configuration
- **Native Pointer Events** — standard API but requires manual gesture math; Hammer.js abstracts it

## FAQ
**Q: Does Hammer.js work with React or Vue?**
A: Yes. Wrap the Manager creation in a useEffect or mounted hook, and clean up with `manager.destroy()` on unmount.

**Q: Can I detect custom gestures?**
A: Yes. Extend `Hammer.AttrRecognizer` or `Hammer.Recognizer` and register it with the manager.

**Q: Is Hammer.js still maintained?**
A: The core library is stable and widely used. Active maintenance is community-driven since the original author stepped back.

**Q: Does it support passive event listeners?**
A: Hammer.js uses non-passive listeners by default for `preventDefault()` support. You can configure this via the `inputClass` option.

## Sources
- https://github.com/hammerjs/hammer.js
- https://hammerjs.github.io/

---
Source: https://tokrepo.com/en/workflows/asset-65c9c448
Author: Script Depot