useGesture

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

import { useGesture } from "@hua-labs/hua/framework";

tsx

const gesture = useGesture({
  onSwipe: (direction) => console.log('Swiped:', direction),
  onTap: (x, y) => console.log('Tapped at:', x, y),
});

return (
  <div
    onTouchStart={gesture.onTouchStart}
    onTouchMove={gesture.onTouchMove}
    onTouchEnd={gesture.onTouchEnd}
    onMouseDown={gesture.onMouseDown}
    onMouseMove={gesture.onMouseMove}
    onMouseUp={gesture.onMouseUp}
  >
    Touch or click me
  </div>
);


enabled	boolean	true	Enable/disable gesture detection
threshold	number	10	Tap detection threshold (px)
timeout	number	300	Tap timeout (ms)
swipeThreshold	number	50	Minimum swipe distance (px)
swipeVelocity	number	0.3	Minimum swipe velocity (px/ms)
onSwipe	(direction, distance, velocity) => void	-	Called on swipe (up/down/left/right)
onPinch	(scale, delta) => void	-	Called on pinch gesture
onRotate	(angle, delta) => void	-	Called on rotate gesture
onPan	(deltaX, deltaY, totalX, totalY) => void	-	Called on pan/drag movement
onTap	(x, y) => void	-	Called on tap
onDoubleTap	(x, y) => void	-	Called on double tap (within 300ms)
onLongPress	(x, y) => void	-	Called on long press (500ms hold)


isActive	boolean	Whether a gesture is in progress
gesture	string \| null	Current gesture type (e.g. "swipe-up", "pinch", "pan")
scale	number	Current pinch scale
rotation	number	Current rotation angle
deltaX	number	Horizontal movement delta
deltaY	number	Vertical movement delta
distance	number	Total gesture distance
velocity	number	Current gesture velocity
onTouchStart	(e: TouchEvent) => void	Touch start handler to attach to element
onTouchMove	(e: TouchEvent) => void	Touch move handler
onTouchEnd	(e: TouchEvent) => void	Touch end handler
onMouseDown	(e: MouseEvent) => void	Mouse down handler
onMouseMove	(e: MouseEvent) => void	Mouse move handler
onMouseUp	(e: MouseEvent) => void	Mouse up handler
start	() => void	Enable gesture detection
stop	() => void	Disable gesture detection
reset	() => void	Reset gesture state

tsx

const gesture = useGesture({
  onSwipe: (direction) => {
    if (direction === 'left') goToNext();
    if (direction === 'right') goToPrev();
  },
  swipeThreshold: 80,
});

// Current gesture state
console.log(gesture.gesture);  // "swipe-left"
console.log(gesture.velocity); // 1.5

useScrollDirectionPro useMouse