A React hook for tracking the hover state of DOM elements in browsers where hovering is possible. If the browser does not support hover states (e.g. a phone) the isHovering value will always be false.

Quick Start

Check out the example on CodeSandbox

import * as React from 'react'
import useHover from '@react-hook/hover'

const Component = (props) => {
  const target = React.useRef(null)
  const isHovering = useHover(target, {enterDelay: 200, leaveDelay: 200})
  return <div ref={target}>{isHovering ? 'Hovering' : 'Not hovering'}</div>
}

API

useHover(target, options?)

function useHover<T extends HTMLElement>(
  target: React.RefObject<T> | T | null,
  options: UseHoverOptions = {}
): boolean

Arguments

| Argument | Type | Required? | Description | | -------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------------------------------ | | target | React.RefObject | T | null | Yes | A React ref created by useRef() or an HTML element | | options | UseHoverOptions | Yes | Configuration options for the hook. See UseHoverOptions below. |

Returns boolean

This hook returns true if the element in ref is in a hover state, otherwise false. This value is always false on devices that don't have hover states, i.e. phones.

UseHoverOptions

| Property | Type | Description | | ---------- | ------ | -------------------------------------------------------------- | | enterDelay | number | Delays setting isHovering to true for this amount in ms | | leaveDelay | number | Delays setting isHovering to false for htis amount in ms |

LICENSE

MIT