git404hub

what is use-gesture fr?

pmndrs/use-gesture — explained in plain English

Analysis updated 2026-05-18

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

tl;dr

use-gesture is a JavaScript library that gives React and plain-JS apps detailed, clean data about mouse and touch gestures, drag, pinch, scroll, hover, so you can build interactive effects in a few lines.

vibe map

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

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

VIBE 4

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

what's the stack?

TypeScriptJavaScriptReact

how it stacks up fr

pmndrs/use-gesturentegrals/openbrowserwxt-dev/wxt
Stars9,6209,4449,800
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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?

Frequently asked questions

what is use-gesture fr?

use-gesture is a JavaScript library that gives React and plain-JS apps detailed, clean data about mouse and touch gestures, drag, pinch, scroll, hover, so you can build interactive effects in a few lines.

What language is use-gesture written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, React.

How hard is use-gesture to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is use-gesture for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.

similar repos, if this ain't it