fn

usePointer

v0.0.14testeddemo

Reactive pointer state (position, pressure, tilt, size, and pointer type) sourced from pointer events on a target, plus whether the pointer is currently inside it.

Examples

ts
const { x, y, pressure, pointerType, isInside } = usePointer();
ts
// Track a specific element, pen only
const { x, y, tiltX, tiltY } = usePointer({ target: el, pointerTypes: ['pen'] });

Demo

Loading demo…

Signature

ts
export function usePointer(options: UsePointerOptions ={ ... }

Parameters

ParameterTypeDescription
options?UsePointerOptionsOptions

Returns

UsePointerReturnReactive pointer state refs and isInside
PropertyTypeDescription
xWritableComputedRef<number>
yWritableComputedRef<number>
pressureWritableComputedRef<number>
pointerIdWritableComputedRef<number>
tiltXWritableComputedRef<number>
tiltYWritableComputedRef<number>
widthWritableComputedRef<number>
heightWritableComputedRef<number>
twistWritableComputedRef<number>
pointerTypeWritableComputedRef<UsePointerType | null>
isInsideShallowRef<boolean>