usePointerSwipe

v0.0.15testeddemo

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