⬅️ Back to Table of Contents

📄 usePointer

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	11
📊 Variables & Constants	2
📐 Interfaces	3

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/usePointer/index.ts

📦 Imports

Name	Source
MaybeRef	vue
Ref	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
PointerType	../types
Position	../types
objectPick	@vueuse/shared
toRefs	@vueuse/shared
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener

---

Variables & Constants

Name	Type	Kind	Value	Exported
defaultState	UsePointerState	const	{ x: 0, y: 0, pointerId: 0, pressure: 0, tiltX: 0, tiltY: 0, width: 0, height...	✗
keys	(keyof UsePointerState)[]	const	Object.keys(defaultState) as (keyof UsePointerState)[]	✗

---

Functions

usePointer(options: UsePointerOptions): UsePointerReturn

Reactive pointer state.

Parameters:

• options any: No description

See: https://vueuse.org/usePointer

Raw JSDoc

/**
 * Reactive pointer state.
 *
 * @see https://vueuse.org/usePointer
 * @param options
 */

Calls:

• shallowRef (from vue)
• Object.assign
• options.pointerTypes.includes
• objectPick (from @vueuse/shared)
• useEventListener (from ../useEventListener)
• toRefs (from @vueuse/shared)

Code

export function usePointer(options: UsePointerOptions = {}): UsePointerReturn {
  const {
    target = defaultWindow,
  } = options

  const isInside = shallowRef(false)
  const state = shallowRef(options.initialValue || {}) as unknown as Ref<UsePointerState>
  Object.assign(state.value, defaultState, state.value)

  const handler = (event: PointerEvent) => {
    isInside.value = true
    if (options.pointerTypes && !options.pointerTypes.includes(event.pointerType as PointerType))
      return

    state.value = objectPick(event, keys, false) as UsePointerState
  }

  if (target) {
    const listenerOptions = { passive: true }
    useEventListener(target, ['pointerdown', 'pointermove', 'pointerup'], handler, listenerOptions)
    useEventListener(target, ['pointerleave', 'pointercancel'], () => isInside.value = false, listenerOptions)
  }

  return {
    ...toRefs(state),
    isInside,
  }
}

Internal helpers

Declared inside another function in this file.

handler(event: PointerEvent): void

Parameters:

• event PointerEvent

Returns: void

Calls:

• options.pointerTypes.includes
• objectPick (from @vueuse/shared)

Code

(event: PointerEvent) => {
    isInside.value = true
    if (options.pointerTypes && !options.pointerTypes.includes(event.pointerType as PointerType))
      return

    state.value = objectPick(event, keys, false) as UsePointerState
  }

---

Interfaces

UsePointerState

Interface Code

export interface UsePointerState extends Position {
  pressure: number
  pointerId: number
  tiltX: number
  tiltY: number
  width: number
  height: number
  twist: number
  pointerType: PointerType | null
}

Properties

Name	Type	Optional	Description
pressure	number	✗	not shown
pointerId	number	✗	not shown
tiltX	number	✗	not shown
tiltY	number	✗	not shown
width	number	✗	not shown
height	number	✗	not shown
twist	number	✗	not shown
pointerType	PointerType \| null	✗	not shown

UsePointerOptions

Interface Code

export interface UsePointerOptions extends ConfigurableWindow {
  /**
   * Pointer types that listen to.
   *
   * @default ['mouse', 'touch', 'pen']
   */
  pointerTypes?: PointerType[]

  /**
   * Initial values
   */
  initialValue?: MaybeRef<Partial<UsePointerState>>

  /**
   * @default window
   */
  target?: MaybeRef<EventTarget | null | undefined> | Document | Window
}

Properties

Name	Type	Optional	Description
pointerTypes	PointerType[]	✓	not shown
initialValue	MaybeRef<Partial<UsePointerState>>	✓	not shown
target	MaybeRef<EventTarget \| null \| undefined> \| Document \| Window	✓	not shown

UsePointerReturn

Interface Code

export interface UsePointerReturn {
  pressure: Ref<number>
  pointerId: Ref<number>
  tiltX: Ref<number>
  tiltY: Ref<number>
  width: Ref<number>
  height: Ref<number>
  twist: Ref<number>
  pointerType: Ref<PointerType | null>
  x: Ref<number>
  y: Ref<number>
  isInside: ShallowRef<boolean>
}

Properties

Name	Type	Optional	Description
pressure	Ref<number>	✗	not shown
pointerId	Ref<number>	✗	not shown
tiltX	Ref<number>	✗	not shown
tiltY	Ref<number>	✗	not shown
width	Ref<number>	✗	not shown
height	Ref<number>	✗	not shown
twist	Ref<number>	✗	not shown
pointerType	Ref<PointerType \| null>	✗	not shown
x	Ref<number>	✗	not shown
y	Ref<number>	✗	not shown
isInside	ShallowRef<boolean>	✗	not shown

---

Generated by Syntax Scribe