useSwipe
Reactive swipe detection based on TouchEvents.
Demo
Direction: none
lengthX: 0 | lengthY: 0
Usage
vue
<script setup lang="ts"> import { useSwipe } from '@vueuse/core' import { useTemplateRef } from 'vue' const el = useTemplateRef('el') const { isSwiping, direction } = useSwipe(el) </script> <template> <div ref="el"> Swipe here </div> </template>Type Declarations
Show Type Declarations
ts
export type UseSwipeDirection = "up" | "down" | "left" | "right" | "none" export interface UseSwipeOptions extends ConfigurableWindow { /** * Register events as passive * * @default true */ passive?: boolean /** * @default 50 */ threshold?: number /** * Callback on swipe start */ onSwipeStart?: (e: TouchEvent) => void /** * Callback on swipe moves */ onSwipe?: (e: TouchEvent) => void /** * Callback on swipe ends */ onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void } export interface UseSwipeReturn { isSwiping: ShallowRef<boolean> direction: ComputedRef<UseSwipeDirection> coordsStart: Readonly<Position> coordsEnd: Readonly<Position> lengthX: ComputedRef<number> lengthY: ComputedRef<number> stop: () => void } /** * Reactive swipe detection. * * @see https://vueuse.org/useSwipe * @param target * @param options */ export declare function useSwipe( target: MaybeRefOrGetter<EventTarget | null | undefined>, options?: UseSwipeOptions, ): UseSwipeReturnSource
Contributors
Anthony Fu
IlyaL
Anthony Fu
丶远方
Amirreza Zarkesh
lstoeferle
NoiseFan
青椒肉丝
SerKo
Fernando Fernández
Alexey Istomin
Jelf
云游君
Shinigami
Alex Kozack