useMousePressed

Category

Sensors

Export Size

980 B

Last Changed

5 days ago

Reactive mouse pressing state

Demo

Basic Usage

import { useMousePressed } from '@reause/core'

const { pressed, sourceType } = useMousePressed()

// only detect mouse changes
const mouse = useMousePressed({ touch: false })

// only capture presses on a specific element (accepts an element or a React ref)
const el = useRef<HTMLDivElement>(null)
const { pressed } = useMousePressed({ target: el })

// initialValue accepts State<boolean>, including a controllable tuple
const [pressedState, setPressedState] = useState(false)
const controlled = useMousePressed({ initialValue: [pressedState, setPressedState] })

Type Declarations

export interface UseMousePressedOptions extends ConfigurableWindow {
    touch?: boolean;
    drag?: boolean;
    capture?: boolean;
    initialValue?: State<boolean>;
    target?: RefObject<EventTarget | null | undefined>;
    onPressed?: (event: MouseEvent | TouchEvent | DragEvent) => void;
    onReleased?: (event: MouseEvent | TouchEvent | DragEvent) => void;
}

export type MousePressedOptions = UseMousePressedOptions

export interface UseMousePressedReturn {
    pressed: boolean;
    sourceType: UseMouseSourceType;
}

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

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

export function useMousePressed(options?: UseMousePressedOptions): UseMousePressedReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e5022 - fix(core): resolve useMousePressed audit findings (#605)

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