useHover

useHover monitors the hover state of a specified HTML element. It allows developers to easily detect whether an element is currently being hovered over by the mouse cursor or (optionally) touched by a touchscreen device.

Usage

Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.
Import useHover into your component.

import { useHover } from '@ridgehkr/useful'

Example

DetectHover.tsx

import { useHover } from '@ridgehkr/useful'
 
function DetectHover() {
  const { ref, hasHover } = useHover() // useHover(true) to include touch events
 
  return <div ref={ref}>{hasHover ? 'Hovered' : 'Not Hovered'}</div>
}

API

Hook Signature

useHover(includeTouch?: boolean): HoverState

Parameters

Property	Type	Required	Description
`includeTouch`	`boolean`	No (defaults to `false`)	whether or not to include touch events in the hover state detection.

Return Value

The hook returns a HoverState object with the following properties:

Property	Type	Description
`ref`	`React.RefObject<HTMLElement>`	A reference to the DOM element being monitored for hover state changes
`hasHover`	`boolean`	Indicates whether the element is currently being hovered over (`true`) or not (`false`)

useGeolocation useIdleTimeout