Package Exports

@react-hook/hover

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-hook/hover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useHover()

npm i @react-hook/hover

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

Quick Start

import useHover from '@react-hook/hover'

const Component = props => {
  const [isHovering, ref] = useHover(200 /*enterDelay*/, 200 /*leaveDelay*/)
  return <div ref={ref}>{isHovering ? 'Hovering' : 'Not hovering'}</div>
}

API

`useHover(enterDelay?: number, leaveDelay?: number)`

Arguments

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

Returns `[isHovering: boolean, ref: (element: HTMLElement) => void]`

Variable	Type	Description
isHovering	`boolean`	`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.
ref	`(element: HTMLElement	null) => void`

LICENSE

MIT

@react-hook/hover