@react-hook/hover
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

useHover()

Bundlephobia Types NPM Version MIT License

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

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

Package Sidebar

Install

npm i @react-hook/hover

Weekly Downloads

3,465

Version

4.0.0

License

MIT

Unpacked Size

23.9 kB

Total Files

20

Last publish

Collaborators

  • jaredlunde