查看原文
其他

一款美轮美奂的JavaScript 小项目

TJ TJ君 2021-12-11

大家好,我是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

效果示例

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

如何使用

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

不同效果的HOOKS

useDrag 处理拖动手势

useMove 处理鼠标移动事件

useHover 处理鼠标进入和鼠标离开事件

useScroll 处理滚动事件

useWheel 处理滚轮事件

usePinch 处理捏手势

useGesture 在一个hook中处理多个手势

是不是挺有意思的,那就赶紧来试试吧:

点击下方卡片,关注公众号“TJ君

回复“gesture”,获取仓库地址

关注我,每天了解一个牛x、好用、有趣的东东

往期推荐

一款插件如何让Github变得不一样?

三款Github插件,让你浏览Github事半功倍

免费开源、操作简洁、功能完善、暗黑风格,还有什么理由拒绝这款SSH工具?

Typora开始收费,介绍几款免费的MarkDown编辑器

开源mybatis分页插件,省时省力

学习如何使用JavaScript 生成各种好看的头像!



: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存