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
}