一个支持丰富鼠标和触摸手势的 React 库

点击上方“蓝字”关注我们吧！

哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！

Use Gesture是一个支持丰富鼠标和触摸手势的 React 库 。Use Gesture可以将丰富的鼠标和事件绑定到任何组件或视图。通过接收到的数据，设置手势变得非常简单，而且通常只需要几行代码。

安装

React

Npm

npm i @use-gesture/react

Yarn

yarn add @use-gesture/react

纯JavaScript：

Npm

npm i @use-gesture/vanilla

Yarn

yarn add @use-gesture/vanilla

使用

react

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

function Example() {
  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, touchAction: 'none' }} />
}

javascript

<!-- index.html -->
<div id="drag" />

// script.js
const el = document.getElementById('drag')
const gesture = new DragGesture(el, ({ active, movement: [mx, my] }) => {
  setActive(active)
  anime({
    targets: el,
    translateX: active ? mx : 0,
    translateY: active ? my : 0,
    duration: active ? 0 : 1000
  })
})

// when you want to remove the listener
gesture.destroy()

Github地址：

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

我是老鱼，白天敲代码，晚上搞自媒体。课程 | 陪跑 | 项目 | 副业咨询添加下方好友，备注 “副业” 送你一份副业赚钱资料vx：erye_520888

- Jetbrains 软件激活码分享 -