react-with-gesture

npm install react-with-gesture

Wraps a component into a div that receives MouseDown and TouchStart events, then captures movement until release.

Demo: https://codesandbox.io/embed/jzn14k0ppy

• down, true on mouse-down or finger-touch
• x/y, screen coordinates
• xDelta/yDelta, coordinates relative to initial coordinates, great for sliding/dragging gestures
• xInitial/yInitial, coordinates of the first click/touch
• xVelocity/yVelocity, flick velocity
• xPrev/yPrev, coordinates of the previous frame
• target, the dom element
• event, the event itself, in case you need to prevent defaults, etc.

Decorated higher order component

import { withGesture } from 'react-with-gesture'

@withGesture
export class App extends React.Component {
  render() {
    const { down, x, y, xDelta, yDelta, xInitial, yInitial } = this.props
    return (
      <div>
        Drag me! coordinates: {x}, {y}
      </div>
    )
  }
}

Higher order component

class App extends React.Component {
  render() {
    const { down, x, y, xDelta, yDelta, xInitial, yInitial } = this.props
    return (
      <div>
        Drag me! coordinates: {x}, {y}
      </div>
    )
  }
}

export withGesture(App)

Render props

import { Gesture } from 'react-with-gesture'

class App extends React.Component {
  render() {
    return (
      <Gesture>
        {({ down, x, y, xDelta, yDelta, xInitial, yInitial }) => (
          <div>
            Drag me! coordinates: {x}, {y}
          </div>
        )}
      </Gesture>
    )
  }
}

Hooks

import { useGesture } from 'react-with-gesture'

function App() {
  const [bind, { args, down, x, y, xDelta, yDelta, xInitial, yInitial }] = useGesture()
  return (
    <div {...bind(/*arguments you pass here will be available under args*/)}>
      Drag me! coordinates: {x}, {y}
    </div>
  )
}

Transient mode

This won't cause new render passes, instead you will be notified through the callback. This works the same for Hoc's, render-props and hooks.

const bind = useGesture(e => console.log(e))