Skip to content

Latest commit

 

History

History
 
 

hover

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

useHover()

Bundlephobia Types Build status 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