⬅️ Back to Table of Contents

📄 useSwipe

📊 Analysis Summary

Metric	Count
🔧 Functions	6
📦 Imports	9
🟢 Vue Composition API	6
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useSwipe/index.ts

📦 Imports

Name	Source
ComputedRef	vue
MaybeRefOrGetter	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
Position	../types
computed	vue
reactive	vue
shallowRef	vue
useEventListener	../useEventListener

---

Vue Composition API

Name	Type	Reactive Variables	Composables
reactive	reactive	none	none
reactive	reactive	none	none
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none

---

Functions

useSwipe(target: MaybeRefOrGetter<EventTarget | null | u…, options: UseSwipeOptions): UseSwipeReturn

Reactive swipe detection.

Parameters:

• target any: No description
• options any: No description

See: https://vueuse.org/useSwipe

Raw JSDoc

/**
 * Reactive swipe detection.
 *
 * @see https://vueuse.org/useSwipe
 * @param target
 * @param options
 */

Calls:

• reactive (from vue)
• computed (from vue)
• max
• abs
• shallowRef (from vue)
• onSwipeEnd
• useEventListener (from ../useEventListener)
• getTouchEventCoords
• updateCoordsStart
• updateCoordsEnd
• onSwipeStart
• Math.abs
• e.preventDefault
• onSwipe
• stops.forEach
• s

Code

export function useSwipe(
  target: MaybeRefOrGetter<EventTarget | null | undefined>,
  options: UseSwipeOptions = {},
): UseSwipeReturn {
  const {
    threshold = 50,
    onSwipe,
    onSwipeEnd,
    onSwipeStart,
    passive = true,
  } = options

  const coordsStart = reactive<Position>({ x: 0, y: 0 })
  const coordsEnd = reactive<Position>({ x: 0, y: 0 })

  const diffX = computed(() => coordsStart.x - coordsEnd.x)
  const diffY = computed(() => coordsStart.y - coordsEnd.y)

  const { max, abs } = Math
  const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold)

  const isSwiping = shallowRef(false)

  const direction = computed((): UseSwipeDirection => {
    if (!isThresholdExceeded.value)
      return 'none'

    if (abs(diffX.value) > abs(diffY.value)) {
      return diffX.value > 0
        ? 'left'
        : 'right'
    }
    else {
      return diffY.value > 0
        ? 'up'
        : 'down'
    }
  })

  const getTouchEventCoords = (e: TouchEvent) => [e.touches[0].clientX, e.touches[0].clientY]

  const updateCoordsStart = (x: number, y: number) => {
    coordsStart.x = x
    coordsStart.y = y
  }

  const updateCoordsEnd = (x: number, y: number) => {
    coordsEnd.x = x
    coordsEnd.y = y
  }

  const listenerOptions = { passive, capture: !passive }

  const onTouchEnd = (e: TouchEvent) => {
    if (isSwiping.value)
      onSwipeEnd?.(e, direction.value)

    isSwiping.value = false
  }

  const stops = [
    useEventListener(target, 'touchstart', (e: TouchEvent) => {
      if (e.touches.length !== 1)
        return
      const [x, y] = getTouchEventCoords(e)
      updateCoordsStart(x, y)
      updateCoordsEnd(x, y)
      onSwipeStart?.(e)
    }, listenerOptions),

    useEventListener(target, 'touchmove', (e: TouchEvent) => {
      if (e.touches.length !== 1)
        return
      const [x, y] = getTouchEventCoords(e)
      updateCoordsEnd(x, y)
      if (listenerOptions.capture && !listenerOptions.passive && Math.abs(diffX.value) > Math.abs(diffY.value))
        e.preventDefault()
      if (!isSwiping.value && isThresholdExceeded.value)
        isSwiping.value = true
      if (isSwiping.value)
        onSwipe?.(e)
    }, listenerOptions),

    useEventListener(target, ['touchend', 'touchcancel'], onTouchEnd, listenerOptions),
  ]

  const stop = () => stops.forEach(s => s())

  return {
    isSwiping,
    direction,
    coordsStart,
    coordsEnd,
    lengthX: diffX,
    lengthY: diffY,
    stop,
  }
}

Internal helpers

Declared inside another function in this file.

getTouchEventCoords(e: TouchEvent): number[]

Parameters:

• e TouchEvent

Returns: number[]

Code

(e: TouchEvent) => [e.touches[0].clientX, e.touches[0].clientY]

updateCoordsStart(x: number, y: number): void

Parameters:

• x number
• y number

Returns: void

Code

(x: number, y: number) => {
    coordsStart.x = x
    coordsStart.y = y
  }

updateCoordsEnd(x: number, y: number): void

Parameters:

• x number
• y number

Returns: void

Code

(x: number, y: number) => {
    coordsEnd.x = x
    coordsEnd.y = y
  }

onTouchEnd(e: TouchEvent): void

Parameters:

• e TouchEvent

Returns: void

Calls:

• onSwipeEnd

Code

(e: TouchEvent) => {
    if (isSwiping.value)
      onSwipeEnd?.(e, direction.value)

    isSwiping.value = false
  }

stop(): void

Returns: void

Calls:

• stops.forEach

Code

() => stops.forEach(s => s())

---

Interfaces

UseSwipeOptions

Interface Code

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
}

Properties

Name	Type	Optional	Description
passive	boolean	✓	not shown
threshold	number	✓	not shown
onSwipeStart	(e: TouchEvent) => void	✓	not shown
onSwipe	(e: TouchEvent) => void	✓	not shown
onSwipeEnd	(e: TouchEvent, direction: UseSwipeDirection) => void	✓	not shown

UseSwipeReturn

Interface Code

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

Properties

Name	Type	Optional	Description
isSwiping	ShallowRef<boolean>	✗	not shown
direction	ComputedRef<UseSwipeDirection>	✗	not shown
coordsStart	Readonly<Position>	✗	not shown
coordsEnd	Readonly<Position>	✗	not shown
lengthX	ComputedRef<number>	✗	not shown
lengthY	ComputedRef<number>	✗	not shown
stop	() => void	✗	not shown

---

Type Aliases

UseSwipeDirection

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

---

Generated by Syntax Scribe