A utility library for adding rich mouse and touch gestures to React and vanilla JavaScript components.
@use-gesture is a JavaScript library that provides utilities for handling advanced mouse and touch gestures in both React and vanilla JavaScript applications. It solves the problem of implementing complex gesture-based interactions—like dragging, pinching, scrolling, and hovering—by delivering clean, structured event data that makes it easy to bind gestures to components with minimal code.
Frontend developers building interactive UIs that require gesture controls, such as draggable interfaces, touch-enabled sliders, zoomable canvases, or custom scroll behaviors, in React or vanilla JavaScript projects.
Developers choose @use-gesture for its simplicity and flexibility—it offers a lightweight, framework-agnostic approach to gestures, integrates seamlessly with popular animation libraries, and reduces boilerplate code while providing precise control over interaction states.
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The useGesture hook combines drag, pinch, scroll, and more into a single interface, simplifying complex interactions as demonstrated in the documentation for sandboxes like draggable lists.
Designed to pair smoothly with libraries like react-spring, with code examples showing gesture-driven animations that reduce boilerplate for fluid UI effects.
Offers separate packages for React and vanilla JavaScript, allowing use in diverse environments without locking into a specific framework.
Provides detailed, actionable data like movement and velocity with minimal abstraction, giving developers precise control over interaction states as outlined in the gesture state docs.
Only supplies gesture data, not visual feedback; developers must handle animations separately, adding complexity compared to all-in-one solutions.
Requires manual CSS touch-action settings on elements to prevent browser conflicts, an extra step highlighted in the simple example that can lead to glitches if overlooked.
Understanding gesture states and options demands familiarity with low-level concepts, making it less accessible for quick prototyping without prior experience.