pmndrs/use-gesture

★ 9,620TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((use-gesture))
    Gesture Types
      Drag
      Pinch to zoom
      Scroll and wheel
      Hover
    React Hooks
      useDrag
      usePinch
      useGesture
      useScroll
    Vanilla JS
      Separate package
      No framework needed
    Pairs Well With
      react-spring
      Any animation lib
    Use Cases
      Draggable cards
      Zoom interfaces
      Scroll effects

mindmap root((use-gesture)) Gesture Types Drag Pinch to zoom Scroll and wheel Hover React Hooks useDrag usePinch useGesture useScroll Vanilla JS Separate package No framework needed Pairs Well With react-spring Any animation lib Use Cases Draggable cards Zoom interfaces Scroll effects

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add drag-and-drop to a React component so it follows the mouse and snaps back to its original position on release.

USE CASE 2

Build a pinch-to-zoom image viewer using the usePinch hook combined with a spring animation library.

USE CASE 3

Create scroll-linked interactive effects tied to page scroll position using useWheel or useScroll.

USE CASE 4

Add precise hover state tracking with mouse coordinates to an interactive canvas or data visualization.

Tech stack

TypeScriptJavaScriptReact

Getting it running

Difficulty · easy Time to first run · 30min

Install via npm, works standalone but pair with react-spring for smooth animated results.

In plain English

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.

Copy-paste prompts

Prompt 1

Using use-gesture's useDrag hook in a React app, build a card that follows the mouse pointer while dragging and snaps back to center on release, animated with react-spring.

Prompt 2

I want to add pinch-to-zoom to an image in my React app. Show me the usePinch hook code from use-gesture and how to apply the resulting scale transform to the image.

Prompt 3

Using useGesture from use-gesture, handle both drag and hover events on the same React component and log each gesture's state and coordinates to the console.

Prompt 4

I'm not using React. How do I install and use the @use-gesture/vanilla package to detect and respond to drag events on a plain HTML div element?

Open on GitHub → Explain another repo

← pmndrs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.