一款美轮美奂的JavaScript 小项目

程序猿DD

发布于 2021-12-06 10:06:34

7070

发布于 2021-12-06 10:06:34

文章被收录于专栏：程序猿DD

大家好，我是TJ

一个励志推荐10000款开源项目与工具的程序员

周末啦，TJ君给大家介绍1款有意思的JavaScript 项目放松一下。

use-gesture

这是一款通过事件绑定来让鼠标和触摸手势变得更加丰富多彩的React库。

而且不需要太多的复杂代码只需要很简单的几行就够了。

小伙伴们可以单独使用，也可以和react-spring这样的库一起使用。

如何安装

React

#Yarn
yarn add @use-gesture/react

#NPM
npm install @use-gesture/react

Vanilla javascript

#Yarn
yarn add @use-gesture/vanilla

#NPM
npm install @use-gesture/vanilla

效果示例

可以先来看下实际的效果：

如果您正在学习Spring Cloud，推荐一个经典教程（含Spring Cloud Alibaba）：https://blog.didispace.com/spring-cloud-learning/

如何使用

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()