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 {};

Sources