useMouseInElement

Category

Elements

Export Size

1.76 kB

Last Changed

5 days ago

Reactive mouse position related to an element

Demo

Usage

import { useMouseInElement } from '@reause/core'
import { useRef } from 'react'

const target = useRef<HTMLDivElement>(null)

const { x, y, elementX, elementY, isOutside } = useMouseInElement(target)

<div ref={target}>
  <h1>Hello world</h1>
</div>

Type Declarations

Toggle

export interface MouseInElementOptions extends UseMouseOptions {
    handleOutside?: boolean;
    windowScroll?: boolean;
    windowResize?: boolean;
}

export interface UseMouseInElementReturn {
    x: number;
    y: number;
    sourceType: UseMouseSourceType;
    elementX: number;
    elementY: number;
    elementPositionX: number;
    elementPositionY: number;
    elementHeight: number;
    elementWidth: number;
    isOutside: boolean;
    stop: () => void;
}

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 type UseMouseSourceType = 'mouse' | 'touch' | null

export function useMouseInElement(target?: RefObject<HTMLElement | null | undefined>, options?: MouseInElementOptions): UseMouseInElementReturn

export function useMouse(options?: UseMouseOptions): UseMouseReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

b371f - fix(core): resolve useMouseInElement audit findings (#604)

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