react-use-gesture 介绍
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()}
{{ transform: xy.interpolate((x,y) => `translate3D(${x}px,${y}px,0)`) }} />
GitHub:https://github.com/react-spring/react-use-gesture
网站描述:组件绑定鼠标/触摸手势的小助手
react-use-gesture
小编说
以上是编程之家为你收集整理的react-use-gesture全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。