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

Quick Start

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

`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 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