@react-hook/hover NPM

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`