useMouseInElement

A React Hook that tracks mouse position in an element.

Demo

Source
isOutside:
false
elementX:
0
elementY:
0
elementPositionX:
0
elementPositionY:
0
elementHeight:
0
elementWidth:
0

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const { isOutside, elementX, elementY, ...rest } = useMouseInElement(elementTarget, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Options

export type MouseInElementOptions = UseMouseOptions & { handleOutside?: boolean }

Returns

Retuerns contain Pausable instance that can be paused, resumed.

See Pausable for more details.

export type UseMouseInElementReturns = Pausable & { /** * Whether the mouse is outside the element */ isOutside: boolean /** * The x position of the mouse relative to the element */ elementX: number /** * The y position of the mouse relative to the element */ elementY: number /** * The x position of the element */ elementPositionX: number /** * The y position of the element */ elementPositionY: number /** * The height of the element */ elementHeight: number /** * The width of the element */ elementWidth: number /** * The mouse state */ stop(): void /** * The mouse state */ mouse: UseMouseReturns }