New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@react-hook/hover

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-hook/hover

A React hook for tracking the hover state of DOM elements in browsers where hovering is possible

  • 4.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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
ArgumentTypeRequired?Description
targetReact.RefObject | T | nullYesA React ref created by useRef() or an HTML element
optionsUseHoverOptionsYesConfiguration 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
PropertyTypeDescription
enterDelaynumberDelays setting isHovering to true for this amount in ms
leaveDelaynumberDelays setting isHovering to false for htis amount in ms

LICENSE

MIT

Keywords

FAQs

Package last updated on 07 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc