這個React庫讓你快樂劃劃劃！

一個支持豐富鼠標(biāo)和觸摸手勢的 React 庫

編程導(dǎo)航 致力于推薦優(yōu)質(zhì)編程資源 ??

項目開源倉庫：https://github.com/liyupi/code-nav

跪求一個 star ??

哈嘍大家好！我是編程導(dǎo)航的小編火寶。今天給大家推薦一個輕松解決拖拉拽哪點事兒的 React 庫。

Use Gesture 是一個支持豐富鼠標(biāo)和觸摸手勢的 React 庫。當(dāng)我們使用鼠標(biāo)或者觸摸手勢進(jìn)行移動、縮放、拖動、滾動、捏合等操作時，Use Gesture可將這些事件綁定到任何組件或視圖。通過使用接收到的數(shù)據(jù)，我們只需要幾行代碼就可以輕松搞定復(fù)雜多樣的手勢動作。

如何使用

安裝

使用 yarn:

yarn add react-use-gesture

使用 npm:

npm install --save react-use-gesture

舉個栗子

下面的例子是使一個 <div/> 可拖動，拖動時它將跟隨我們的鼠標(biāo)或手指移動，并在釋放時返回其初始位置。

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

import styles from './styles.module.css'

export default function App() {
  const [style, api] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ active, movement: [x, y] }) => {
    api.start({
      x: active ? x : 0,
      y: active ? y : 0,
      scale: active ? 1.2 : 1
    })
  })

  return (
    <div className="flex fill center">
      <a.div tabIndex={-1} {...bind()} className={styles.drag} style={style} />
    </div>
  )
}

效果如下：

這其實是 useDrag hook 返回一個函數(shù)（存儲在 bind 常數(shù)中），該函數(shù)在調(diào)用時會返回一個帶有事件處理程序的對象。當(dāng)我們將 {...bind()} 擴(kuò)展到某個組件中時，實際上是在添加 onMouseDown 和 onTouchStart事件來處理。

可用 Hooks

useDrag 只是 React UseGesture 的其中一個 hook，它可以處理多種不同的手勢。

這個庫更能與 React-spring 這樣的動畫庫結(jié)合使用，解鎖更多手勢就是現(xiàn)在！