A React hook for tracking the hover state of DOM elements in browsers where hovering is possible
npm install @react-hook/hovernpm i @react-hook/hover
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.
Check out the example on CodeSandbox
``jsx harmony
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
API
$3
`tsx
function useHover(
target: React.RefObject | 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
booleanThis 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` |MIT