solid-gesture

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.

Installation

pnpm add solid-gesture

Usage

import { 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()} />
}

Simple example

More examples soon...

Primitives

solid-gesture exports several primitives that can handle different gestures.

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)} />

• state is 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.
• config is an object containing options for the gesture. You can find all config options in the Gesture options section.
• arg is a custom argument you can pass to the bind function. See this example to see where it can be useful.

License

MIT