How do I prevent tap events from firing after a long press in TinyGesture?

Use the manual method from the README: set a flag in the 'longpress' event handler and check it in the 'tap' handler. This requires extra state management but ensures accurate gesture separation without built-in support.

TinyGesture vs Hammer.js: which is better for basic gestures?

TinyGesture is lighter and simpler, ideal for basic gesture needs with minimal footprint and no dependencies. Hammer.js offers more features and a larger ecosystem but at the cost of higher bundle size and complexity, so choose based on project scope.

Can I use TinyGesture with React or Vue?

Yes, it works with any framework since it's vanilla JS. Integrate by attaching to DOM elements in lifecycle methods (e.g., useEffect in React), but handle cleanup manually with gesture.destroy() to avoid memory leaks.

How to implement pinch-to-zoom with TinyGesture?

Listen to the 'pinch' event and use the gesture.scale property to adjust an element's transform scale via CSS or canvas. You'll need to handle the visual updates yourself, as the library doesn't provide animation or rendering.

Does TinyGesture support diagonal swipes?

Yes, enable the diagonalSwipes option in settings. When on, diagonal gestures can trigger both horizontal and vertical swipe events based on the diagonalLimit, allowing flexible interaction design.

What are the breaking changes in TinyGesture v3?

The diagonalLimit option's meaning changed from v2, and new events for pinch and rotate were added. TypeScript exports now target ES2020 instead of ES6, so check the README's upgrade notes for migration details.

Open-Awesome

tinygesture

Apache-2.0TypeScript

A minimal JavaScript library for recognizing swipe, pan, tap, doubletap, longpress, pinch, and rotate gestures.

Visit Website GitHub

226 stars20 forks0 contributors

What is tinygesture?

TinyGesture is a very small JavaScript library that recognizes common touch and mouse gestures like swipe, pan, tap, doubletap, longpress, pinch, and rotate. It solves the problem of adding intuitive gesture controls to web applications without the overhead of larger frameworks, providing a minimal and performant solution.

Target Audience

Frontend developers building interactive web applications that require gesture support, especially those targeting mobile devices or touch-enabled interfaces.

Value Proposition

Developers choose TinyGesture for its minimal footprint, straightforward API, and comprehensive gesture coverage, allowing them to implement complex interactions with minimal code and no external dependencies.

Overview

Very small gesture recognizer for JavaScript. Swipe, pan, tap, doubletap, longpress, pinch, and rotate. (Mirror of https://forge.sciactive.com/sciactive/tinygesture)

Use Cases

Best For

Adding swipe navigation to mobile web apps
Implementing pinch-to-zoom in image galleries
Creating draggable UI elements with pan gestures
Handling tap and longpress interactions in custom components
Building touch-enabled games or interactive demos
Enhancing desktop applications with mouse gesture support

Not Ideal For

Applications requiring gesture-driven animations or visual feedback out of the box, as it only provides recognition data without UI components
Projects needing advanced gesture features like chaining, velocity-based animations, or deep integration with specific frameworks (e.g., React Native)
Teams that prefer all-in-one solutions with built-in gesture handling in larger libraries like Hammer.js or Framer Motion

Pros & Cons

Pros

Lightweight and Minimal

The library is very small with minimal overhead, making it ideal for performance-critical web applications without adding bloat, as emphasized in its philosophy of simplicity.

Comprehensive Gesture Support

Covers all common gestures including swipe, pan, tap, doubletap, longpress, pinch, and rotate, with clear event separation and properties like scale and rotation for multi-touch.

Simple and Intuitive API

Uses straightforward event listeners (e.g., gesture.on('swipeleft', callback)) and provides real-time data such as velocityX and swipingDirection, easing integration into custom code.

Cross-Platform Compatibility

Supports both touch and mouse events with the mouseSupport option, enabling gesture recognition on desktop and mobile devices without extra configuration.

Cons

Passive Listeners Limit Control

Uses passive event listeners, preventing developers from calling event.preventDefault() to manage default browser behavior, which can be restrictive for certain interactions like preventing scroll during pans.

Manual Gesture State Management

Handling scenarios like distinguishing long press from tap requires manual flag management, as shown in the README example, adding complexity for common use cases.

Breaking Changes Between Versions

Upgrades, such as from v2 to v3, introduce breaking changes like altered diagonalLimit behavior and new events, which can disrupt existing implementations without careful migration.

Frequently Asked Questions

Related Projects

alloyfinger

Super tiny size multi-touch gestures library for the web. 　　　You can touch this →

Stars3,441

Forks539

Last commit7 years ago

detect-it

Detect if a device is mouseOnly, touchOnly, or hybrid, and if the primary input is mouse or touch.

Stars434

Forks12

Last commit5 years ago

pointer-tracker

Track mouse/touch/pointer events for a given element.

Stars191

Forks25

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub