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-touchx/y
, screen coordinatesxDelta/yDelta
, coordinates relative to initial coordinates, great for sliding/dragging gesturesxInitial/yInitial
, coordinates of the first click/touch
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>
)
}
}
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)
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>
)
}
}
import { useSpring } from 'react-with-gesture'
function App() {
const [handlers, { down, x, y, xDelta, yDelta, xInitial, yInitial }] = useGesture()
return (
<div {...handlers}>
Drag me! coordinates: {x}, {y}
</div>
)
}