API Reference
useHover

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

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

  2. 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

PropertyTypeRequiredDescription
includeTouchbooleanNo (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:

PropertyTypeDescription
refReact.RefObject<HTMLElement>A reference to the DOM element being monitored for hover state changes
hasHoverbooleanIndicates whether the element is currently being hovered over (true) or not (false)