solid-gesture is a port of @use-gesture/react which 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 solid-spring, though you can most certainly use any other.
pnpm add solid-gestureimport { createSpring, animated } from 'solid-spring'
import { useDrag } from 'solid-gesture'
function PullRelease() {
const [coords, setCoords] = createSignal({
x: 0,
y: 0
})
const styles = createSpring(() => ({
x: coords().x,
y: coords().y
}))
// Set the drag hook and define component movement based on gesture data
const bind = useDrag(({ down, movement: [mx, my] }) => {
setCoords({ x: down ? mx : 0, y: down ? my : 0 })
})
// Bind it to a component
return <animated.div {...bind()} style={styles()} />
}
More examples soon...
solid-gesture exports several primitives that can handle different gestures.
| Primitive | Description |
|---|---|
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 primitive |
With the exception of useGesture which is a special primitive, all other primitives share the same API:
const bind = useDrag((state) => doSomethingWith(state), config)
return <div {...bind(arg)} />stateis an object containing all attributes of the gesture, including the original event. That state is passed to your handler every time the gesture updates. You can find all state attributes in the Gesture state section.configis an object containing options for the gesture. You can find all config options in the Gesture options section.argis a custom argument you can pass to the bind function. See this example to see where it can be useful.
MIT