onSwipe
Category Sensors
Reactive swipe detection for mobile devices using TouchEvents.
Demo
Try dragging the element for half the container.
Swipe right
Direction: none
lengthX: 0 | lengthY: 0
Usage
import { onSwipe } from '@sv-use/core';
let el = $state();
const swipe = onSwipe(() => el);
Type Definitions
import type { ConfigurableWindow } from '../__internal__/configurable.js';
import type { MaybeGetter } from '../__internal__/types.js';
type Position = {
x: number;
y: number;
};
type OnSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';
interface OnSwipeOptions extends ConfigurableWindow {
/**
* Whether to register events as passive or not.
* @default true
*/
passive?: boolean;
/**
* The treshold in pixels before considering the touch event as a swipe.
* @default 50
*/
threshold?: number;
/**
* Callback on swipe start.
* @default () => {}
*/
onStart?(e: TouchEvent): void;
/**
* Callback on swipe move.
* @default () => {}
*/
onMove?(e: TouchEvent): void;
/**
* Callback on swipe end.
* @default () => {}
*/
onEnd?(e: TouchEvent, direction: OnSwipeDirection): void;
}
type OnSwipeReturn = {
readonly isSwiping: boolean;
readonly direction: OnSwipeDirection;
readonly coordsStart: Position;
readonly coordsEnd: Position;
/** The distance travelled by the swipe in the `x` axis. */
readonly lengthX: number;
/** The distance travelled by the swipe in the `y` axis. */
readonly lengthY: number;
reset: () => void;
cleanup: () => void;
};
/**
* Reactive swipe detection for mobile devices.
* @param target The target on which to detect swipe events.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/on-swipe
*/
export declare function onSwipe(target: MaybeGetter<EventTarget | null | undefined>, options?: OnSwipeOptions): OnSwipeReturn;
export {};