usePointerSwipe

v0.0.14testeddemo

Detect swipe gestures via PointerEvents on a target element. Works for mouse, touch and pen with a single unified event model, tracking start/end coordinates, the active state and the resolved direction.

Source Tests

Example

const el = useTemplateRef<HTMLElement>('el');
const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(el, {
  threshold: 30,
  onSwipeEnd(e, dir) { console.log(dir); },
});

Demo

Loading demo…

Signature

export function usePointerSwipe(
  target: MaybeComputedElementRef,
  options: UsePointerSwipeOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef`	—	Element ref, getter, or instance to listen on
`options`?	`UsePointerSwipeOptions`	`{}`	Threshold, pointer types and lifecycle callbacks

Returns

UsePointerSwipeReturnReactive swipe state and a stop teardown function

Property	Type	Default	Description
`isSwiping`	`Readonly<ShallowRef<boolean>>`	—	Whether a swipe is currently in progress (threshold exceeded).
`direction`	`ComputedRef<UsePointerSwipeDirection>`	—	The resolved swipe direction.
`posStart`	`DeepReadonly<UsePointerSwipePosition>`	—	Coordinates where the pointer went down.
`posEnd`	`DeepReadonly<UsePointerSwipePosition>`	—	Coordinates of the latest pointer position.
`distanceX`	`ComputedRef<number>`	—	Signed horizontal distance travelled (`posStart.x - posEnd.x`).
`distanceY`	`ComputedRef<number>`	—	Signed vertical distance travelled (`posStart.y - posEnd.y`).
`stop`	`() => void`	—	Tear down all listeners.