useSwipe

v0.0.14testeddemo

Detect swipe gestures via touch events on a target element. Tracks start/end coordinates, the active state and the resolved direction.

Source Tests

Example

const el = useTemplateRef<HTMLElement>('el');
const { isSwiping, direction, lengthX, lengthY } = useSwipe(el, {
  onSwipeEnd(e, dir) { console.log(dir); },
});

Demo

Loading demo…

Signature

export function useSwipe(
  target: MaybeComputedElementRef,
  options: UseSwipeOptions ={ ... }

Parameters

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

Returns

UseSwipeReturnReactive swipe state and a stop teardown function

Property	Type	Default	Description
`isSwiping`	`ShallowRef<boolean>`	—	Whether a swipe is currently in progress (threshold exceeded).
`direction`	`ComputedRef<UseSwipeDirection>`	—	The resolved swipe direction.
`coordsStart`	`DeepReadonly<UseSwipePosition>`	—	Coordinates of the initial touch.
`coordsEnd`	`DeepReadonly<UseSwipePosition>`	—	Coordinates of the latest touch position.
`lengthX`	`ComputedRef<number>`	—	Signed horizontal distance travelled (`coordsEnd.x - coordsStart.x`).
`lengthY`	`ComputedRef<number>`	—	Signed vertical distance travelled (`coordsEnd.y - coordsStart.y`).
`stop`	`() => void`	—	Tear down all listeners.