Bind Mouse And Touch Events To Any Component Or View – UseGesture

Vue UseGesture is a hook that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.

Hookd Included:

• useDrag: Handles the drag gesture
• useMove: Handles mouse move events
• useHover: Handles mouse enter and mouse leave events
• useScroll: Handles scroll events
• useWheel: Handles wheel events
• usePinch: Handles the pinch gesture
• useGesture: Handles multiple gestures in one hook

How to use it:

1. Import the UseGesture.

import { useDrag } from ‘vue-use-gesture’
import { useSpring } from ‘vue-use-spring’
import { defineComponent, computed } from ‘vue’

2. Basic usage.

<template>
  <div v-bind="bind()" :style="style" class="box"></div>
</template>

export default defineComponent({
  setup() {
    const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
    const bind = useDrag(({ down, movement: [mx, my] }) => {
      set({ x: down ? mx : 0, y: down ? my : 0 })
    })
    const style = computed(() => ({ transform: `translate3d(${x.value}px,${y.value}px,0)` }))
    return { bind, style }
  },
})

Preview:

Download Details:

Author: koca

Live Demo: https://vue-use-gesture.netlify.app/docs/examples

Download Link: https://github.com/koca/vue-use-gesture/archive/main.zip

Official Website: https://github.com/koca/vue-use-gesture

Install & Download:

# Yarn
$ yarn add vue-use-gesture

# NPM
$ npm i vue-use-gesture