d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

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:

use-gesture

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

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this