1---
2category: Sensors
3---
4 
5# usePointerSwipe
6 
7Reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent).
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { usePointerSwipe } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const { isSwiping, direction } = usePointerSwipe(el)
18</script>
19 
20<template>
21  <div ref="el">
22    Swipe here
23  </div>
24</template>
25```
26 
27## Type Declarations
28 
29```ts
30export interface UsePointerSwipeOptions {
31  /**
32   * @default 50
33   */
34  threshold?: number
35  /**
36   * Callback on swipe start.
37   */
38  onSwipeStart?: (e: PointerEvent) => void
39  /**
40   * Callback on swipe move.
41   */
42  onSwipe?: (e: PointerEvent) => void
43  /**
44   * Callback on swipe end.
45   */
46  onSwipeEnd?: (e: PointerEvent, direction: UseSwipeDirection) => void
47  /**
48   * Pointer types to listen to.
49   *
50   * @default ['mouse', 'touch', 'pen']
51   */
52  pointerTypes?: PointerType[]
53  /**
54   * Disable text selection on swipe.
55   *
56   * @default false
57   */
58  disableTextSelect?: boolean
59}
60export interface UsePointerSwipeReturn {
61  readonly isSwiping: ShallowRef<boolean>
62  direction: Readonly<ShallowRef<UseSwipeDirection>>
63  readonly posStart: Position
64  readonly posEnd: Position
65  distanceX: Readonly<ComputedRef<number>>
66  distanceY: Readonly<ComputedRef<number>>
67  stop: () => void
68}
69/**
70 * Reactive swipe detection based on PointerEvents.
71 *
72 * @see https://vueuse.org/usePointerSwipe
73 * @param target
74 * @param options
75 */
76export declare function usePointerSwipe(
77  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
78  options?: UsePointerSwipeOptions,
79): UsePointerSwipeReturn
80```
81