koca / vue-use-gesture Goto Github PK

View Code? Open in Web Editor NEW

151.0 5.0 9.0 15.59 MB

👇 Bread n butter utility for component-tied mouse/touch gestures in Vue

Home Page: https://vue-use-gesture.netlify.app

License: MIT License

JavaScript 3.51% HTML 1.40% TypeScript 61.97% Vue 26.43% CSS 6.69%

vue gesture composable hooks

vue-use-gesture's Introduction

Vue UseGesture

WIP

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.

You can use it stand-alone, but to make the most of it you should combine it with an animation library like vue-use-spring, though you can most certainly use any other.

The demos are real (we'll add them to the codesandbox soon)

Installation

#Yarn
yarn add vue-use-gesture

#NPM
npm install vue-use-gesture

Full documentation website

Simple example

<template>
  <!-- Bind it to a component -->
  <div v-bind="bind()" :style="style" class="box"></div>
</template>

<script>
  import { useDrag } from 'vue-use-gesture'
  import { useSpring } from 'vue-use-spring'
  import { defineComponent, computed } from 'vue'

  export default defineComponent({
    setup() {
      const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))

      // Set the drag hook and define component movement based on gesture data
      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)`, touchAction: 'none' }))

      return { bind, style }
    },
  })
</script>

The example above makes a div draggable so that it follows your mouse on drag, and returns to its initial position on release.

Make sure you always set touchAction on a draggable element to prevent glitches with the browser native scrolling on touch devices.

Available hooks

vue-use-gesture exports several hooks that can handle different gestures:

Hook	Description
`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

Thanks

This library is a port of React UseGesture. Thanks Poimandres 🙏

License

MIT

vue-use-gesture's People

Stargazers

Watchers

Forkers

vue-use-gesture's Issues

An example of use-gesture would be very nice.

An example of use gesture would be very nice.
currently there are only examples in example-vue-2 for the other gestures,
I am interasted in a drag & rotate gesture

thanks for the amazing work, I actually struggle with interactjs...

actually I try to make a draggable component, in the end with scopes to put different content in it.
I used the use-drag file, but got some errors. here's my base app

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> 
     <dragcard/>
     <dragcard/>  
     <dragcard/>  
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import dragcard from './components/use-drag.vue'


export default {
  name: 'App',
  components: {
    HelloWorld,
    dragcard
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

in your file I made the root div more generic to get a container to fill with other stuff. It works but it throws an error.

vueusegesture.esm.js?b67e:1312 Deprecation notice: When the domTarget option is specified, you don't need to write useEffect(bind, [bind]) anymore: event binding is now made handled internally to this lib.
Next version won't return anything when domTarget is provided, therefore your code will break if you try to call useEffect.

I saw in the pinch demo that you use v-on="bind()" and not the domTarget in the gesture method. Ok, when I change this, comment out the { domTarget: refEl } and use the bind, Now error, but now interaction.

Would be nice to get a little help,

in the next step I will take over the drag into the gesture and integrate the pinch. but first i have to bring my knowledge of composition api up to date.

<template>
    <div id="drag-card" ref="refEl" :style="transformStyle">
    <!-- <div id="drag-card" ref="refEl" :style="transformStyle" v-on="bind()"> -->
        <div class="area w-20 h-20 bg-blue-300 rounded-2xl"> </div>
    </div>
</template>


<script>
import { useDrag, useSpring } from 'vue-use-gesture'
import { defineComponent, computed, ref } from '@vue/composition-api'


export default defineComponent({
  setup() {
    const refEl = ref()
    const transform = useSpring({ x: 0, y: 0 })

    // bind doesn't work for vue 2 bec of event names we can change listener names using vue-demi
    const bind = useDrag(
      ({ down, movement: [mx, my] }) => {
        transform.x = down ? mx : 0
        transform.y = down ? my : 0
      }  ,
       { domTarget: refEl }
    )
    console.log(bind())

    const transformStyle = computed(() => {
      const style = { transform: `translate3d(${transform.x}px,${transform.y}px,0)` }
      return style
    })

    return {
      refEl,
      bind,
      transformStyle,
    }
  },
})
</script>

<style>
.area {
  touch-action: none;
  cursor: -webkit-grab;
  cursor: grab;
}
</style>