gitmyhub

use-gesture

TypeScript ★ 9.6k updated 1y ago

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.

This is a JavaScript library that makes it easy to detect and respond to mouse and touch gestures on elements in a web page. Gestures include dragging, pinching, scrolling, hovering, and wheel movements. The library gives you clean, detailed data about each gesture so you can write interactive effects in just a few lines of code.

It works with React, where it provides a set of hooks (small reusable functions that plug into React components), and also with plain JavaScript for projects that do not use React. The README includes simple examples showing a draggable box that follows your mouse and snaps back when released. Pairing this library with an animation library like react-spring is recommended for smooth visual results, though it is not required.

The available hooks cover specific gesture types individually: useDrag for drag events, usePinch for pinch-to-zoom, useScroll and useWheel for scrolling, useHover for mouse enter and leave, and useGesture for handling multiple gesture types in one place.

Installation is a single package install via npm or yarn, with separate packages for the React and vanilla JavaScript versions. Full documentation with details on every option is hosted at use-gesture.netlify.com. The project is part of the Poimandres open-source collective and includes links to several interactive demos built with the library.