Util function for handling hover for both touch and mouse.

useHover.ts

import { useState, HTMLAttributes, useRef, useEffect } from 'react'

export interface UseHoverOptions {
  mouseEnterDelayMS?: number
  mouseLeaveDelayMS?: number
}

export type HoverProps = Pick<HTMLAttributes<HTMLElement>, 'onMouseEnter' | 'onMouseLeave'>

export const useHover = ({ mouseEnterDelayMS = 0, mouseLeaveDelayMS = 0 }: UseHoverOptions = {}): [boolean, HoverProps] => {
  const [isHovering, setIsHovering] = useState(false)
  const mouseOutTimer = useRef(null)
  const mouseEnterTimer = useRef(null)

  useEffect(() => {
    return () => {
      clearTimeout(mouseOutTimer.current)
      clearTimeout(mouseEnterTimer.current)
    }
  })

  return [
    isHovering,
    {
      onMouseEnter: () => {
        clearTimeout(mouseOutTimer.current)
        mouseEnterTimer.current = setTimeout(() => setIsHovering(true), mouseEnterDelayMS)
      },
      onMouseLeave: () => {
        clearTimeout(mouseEnterTimer.current)
        mouseOutTimer.current = setTimeout(() => setIsHovering(false), mouseLeaveDelayMS)
      },
    },
  ]
}