useMouse

Category

Sensors

Export Size

790 B

Last Changed

5 days ago

Reactive mouse position

Demo

Basic Usage

import { useMouse } from '@reause/core'

const { x, y, sourceType } = useMouse()

Touch is enabled by default. To only detect mouse changes, set touch to false. The dragover event is used to track mouse position while dragging.

const { x, y } = useMouse({ touch: false })

Custom Extractor

It's also possible to provide a custom extractor function to get the position from the event.

import type { UseMouseEventExtractor } from '@reause/core'
import { useMouse } from '@reause/core'
import { useRef } from 'react'

const parentRef = useRef<HTMLDivElement>(null)

const extractor: UseMouseEventExtractor = event => (
  event instanceof MouseEvent
    ? [event.offsetX, event.offsetY]
    : null
)

const { x, y, sourceType } = useMouse({ target: parentRef, type: extractor })

Type Declarations

export type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement'

export type UseMouseSourceType = 'mouse' | 'touch' | null

export type UseMouseEventExtractor = (event: MouseEvent | Touch) => [
    x: number,
    y: number
] | null | undefined

export interface UseMouseOptions extends ConfigurableWindow {
    type?: UseMouseCoordType | UseMouseEventExtractor;
    target?: RefObject<Window | EventTarget | null | undefined>;
    touch?: boolean;
    scroll?: boolean;
    resetOnTouchEnds?: boolean;
    initialValue?: Position;
    eventFilter?: EventFilter;
}

export interface UseMouseReturn {
    x: number;
    y: number;
    sourceType: UseMouseSourceType;
}

interface Position {
    x: number;
    y: number;
}

export function useMouse(options?: UseMouseOptions): UseMouseReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

24190 - fix: re-bind listeners when the target ref populates after mount

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

37fd6 - fix(core): resolve useMouse audit findings (#603)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)