MouseWithin
Utility used to determine if the mouse pointer is currently inside the given set of elements.
Examples
Usage
Handle mouseEnter and mouseLeave events automatically with mouse within.
Mouse within automatically re-renders children whenever the events above happen, letting you update layout or styling as you need to.
APIs
IMouseWithin
hasMouse
() => boolean
IMouseWithinEvents
onMouseEnteroptional
(event: React.MouseEvent<HTMLElement>) => void
onMouseLeaveoptional
(event: React.MouseEvent<HTMLElement>) => void
IMouseWithinProps
enterDelay
number
An enterDelay can be specified to control how long the mouse must be over
the component before the onMouseEnter delegate is called.
leaveDelay
number
A leaveDelay can be specified to control how long the mouse must be out of
the component before the onMouseLeave delegate is called.
onMouseEnterInherited From: IMouseWithinEvents
(event: React.MouseEvent<HTMLElement>) => void
onMouseLeaveInherited From: IMouseWithinEvents
(event: React.MouseEvent<HTMLElement>) => void
updateStateOnMouseChange
boolean
If updateStateOnMouseChange is set to true, the MouseWithin component will update
the state of the component and cause a re-render of the sub-tree when the mouse enters
of leaves the component.
IMouseWithinStatus
hasMouse
boolean
onMouseEnteroptionalInherited From: IMouseWithinEvents
(event: React.MouseEvent<HTMLElement>) => void
onMouseLeaveoptionalInherited From: IMouseWithinEvents
(event: React.MouseEvent<HTMLElement>) => void