usePointerSwipe

Category

Sensors

Export Size

915 B

Last Changed

5 days ago

Reactive swipe detection based on PointerEvents

Demo

Usage

import { usePointerSwipe } from '@reause/core'
import { useRef } from 'react'

const el = useRef<HTMLDivElement>(null)
const { isSwiping, direction } = usePointerSwipe(el, {
  threshold: 50,
  onSwipeEnd: (e, direction) => console.log(direction),
})
// direction: 'up' | 'down' | 'left' | 'right' | 'none'

Type Declarations

Toggle

export interface UsePointerSwipeOptions {
    threshold?: number;
    onSwipeStart?: (e: PointerEvent) => void;
    onSwipe?: (e: PointerEvent) => void;
    onSwipeEnd?: (e: PointerEvent, direction: UseSwipeDirection) => void;
    pointerTypes?: PointerType[];
    disableTextSelect?: boolean;
}

export interface UsePointerSwipeReturn {
    readonly isSwiping: boolean;
    readonly direction: UseSwipeDirection;
    readonly posStart: Readonly<Position>;
    readonly posEnd: Readonly<Position>;
    readonly distanceX: number;
    readonly distanceY: number;
    stop: () => void;
}

export type UseSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none'

export interface UseSwipeOptions extends ConfigurableWindow {
    passive?: boolean;
    threshold?: number;
    onSwipeStart?: (e: TouchEvent) => void;
    onSwipe?: (e: TouchEvent) => void;
    onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void;
}

export interface UseSwipeReturn {
    isSwiping: boolean;
    direction: UseSwipeDirection;
    coordsStart: Readonly<Position>;
    coordsEnd: Readonly<Position>;
    lengthX: number;
    lengthY: number;
    stop: () => void;
}

export type PointerType = 'mouse' | 'touch' | 'pen'

export interface UsePointerState {
    x: number;
    y: number;
    pointerId: number;
    pressure: number;
    tiltX: number;
    tiltY: number;
    width: number;
    height: number;
    twist: number;
    pointerType: PointerType | null;
}

export interface UsePointerOptions extends ConfigurableWindow {
    pointerTypes?: PointerType[];
    initialValue?: Partial<UsePointerState>;
    target?: RefObject<EventTarget | null | undefined>;
}

interface Position {
    x: number;
    y: number;
}

export function usePointerSwipe(target: RefObject<HTMLElement | null | undefined>, options?: UsePointerSwipeOptions): UsePointerSwipeReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

af53d - fix(core): resolve usePointerSwipe audit findings (#620)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)