Bind Richer Mouse And Touch Events To Component/View – use-gesture

use-gesture is a React hook library that lets you bind richer mouse and touch events to any component or view.

With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

Available hooks:

• useDrag
• useMove
• useHover
• useScroll
• useWheel
• usePinch
• useGesture

Basic usage:

1. Install and import the hook library.

# Yarn
$ yarn add @use-gesture/react

# NPM
$ npm i @use-gesture/react --save

2. Create a draggable component.

import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'

function PullRelease() {
  const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }))
  // Set the drag hook and define component movement based on gesture data
  const bind = useDrag(({ down, movement: [mx, my] }) => {
    api.start({ x: down ? mx : 0, y: down ? my : 0 })
  })
  // Bind it to a component
  return <animated.div {...bind()} style={{ x, y }} />
}

Preview:

Download Details:

Author: pmndrs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/pmndrs/use-gesture

License: MIT