useHover
A React Hook that helps to track the hover state of an element.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const isHovered = useHover(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 UseHoverOptions = {
/**
* Delay in milliseconds before the `onEnter` event is triggered
*/
delayEnter?: number
/**
* Delay in milliseconds before the `onLeave` event is triggered
*/
delayLeave?: number
/**
* Event handler when the mouse enters the target element
*/
onEnter?: (e: MouseEvent) => void
/**
* Event handler when the mouse leaves the target element
*/
onLeave?: (e: MouseEvent) => void
/**
* Event handler when the mouse enters or leaves the target element
*/
onChange?: (isHovered: boolean, e: MouseEvent) => void
}
Returns
A boolean value that indicates whether the target element is hovered.
