react-use-gesture

react-use-gesture 介绍

react-use-gesture是一个钩子，可以将更丰富的鼠标和触摸事件绑定到任何组件或视图。使用您收到的数据，设置手势变得微不足道，并且通常只需要几行代码。  

简单的例子

示例使div拖拽成为可拖动，以便在拖动时跟随鼠标，并在发布时返回其初始位置。

import { useSpring,animated } from 'react-spring'

import { useDrag } from 'react-use-gesture'

function PullRelease() {

const [{ xy },set] = useSpring(() => ({ xy: [0,0] }))

// 1. Define the gesture

const bind = useDrag(({ down,delta }) => set({ xy: down ? delta : [0,0] }))

return (

<animated.div

// 2. Bind it to a component

{...bind()}

{{ transform: xy.interpolate((x,y) => `translate3D(${x}px,${y}px,0)`) }} />

GitHub:https://github.com/react-spring/react-use-gesture

网站描述:组件绑定鼠标/触摸手势的小助手

react-use-gesture

官方网站：