扫一扫分享
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()}
style={{ transform: xy.interpolate((x, y) => `translate3D(${x}px, ${y}px, 0)`) }} />
手机预览