Registry / web-framework / react-use-hoverintent

react-use-hoverintent

JSON →
library1.3.0jsnpmunverified

React hook that implements hoverIntent behavior, delaying hover callbacks until the user's mouse slows down. Version 1.3.0 supports ESM and CommonJS, includes TypeScript types, and has zero dependencies. Released roughly every few months with maintenance updates. Differentiates from alternatives by being a lightweight hook with no external runtime requirements, inspired by jQuery hoverIntent.

web-framework
npm install react-use-hoverintent
github ↗package ↗
INSTALL
IMPORT
SIG · REACT-USE-HOVERINT
R
react-use-hoverintent
web-frameworkjavascriptv1.3.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

useHoverIntent
✓ import { useHoverIntent } from 'react-use-hoverintent'
✗ import useHoverIntent from 'react-use-hoverintent'
Named export only. ESM module available via .esm.js path from v1.3.0.

Basic usage of useHoverIntent hook with custom options, showing isHovering state and ref.

import { useHoverIntent } from 'react-use-hoverintent'; import React from 'react'; export const MyComponent = () => { const [isHovering, intentRef, setIsHovering] = useHoverIntent({ timeout: 150, sensitivity: 7, interval: 120 }); return ( <div ref={intentRef} style={{ width: 200, height: 200, background: isHovering ? 'blue' : 'gray', transition: 'background 0.3s' }} > {isHovering ? 'Hovering' : 'Not hovering'} </div> ); };
Debug
Known issues
breakingv1.2.9 reversed the array return order to match earlier versions, potentially breaking code that depended on v1.2.8's order.
fix
Upgrade to v1.2.9+ and ensure array destructuring order matches documentation: [isHovering, intentRef, setIsHovering]
affects: >=1.2.8 <1.2.9
gotchaThe setIsHovering setter exposed since v1.2.8 allows direct mutation of hover state, which can desync from actual mouse events.
fix
Avoid using setIsHovering unless absolutely necessary; prefer relying on hover intent callbacks.
affects: >=1.2.8
gotchaUsing ref option with forwarded refs requires careful merging to avoid losing the original ref binding.
fix
Pass ref option to useHoverIntent({ref: forwardedRef}) and ensure intentRef is used on DOM element.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: can't access property 'current', intentRef is undefined
Calling useHoverIntent outside a React functional component or before component mount.
fix
Ensure useHoverIntent is called inside a React functional component. Check that intentRef is correctly destructured: const [isHovering, intentRef] = useHoverIntent();
Warning: Function components cannot be given refs. Attempts to access this ref will fail.
Using intentRef on a custom component without forwardRef.
fix
Use React.forwardRef on custom components and pass intentRef to the underlying DOM element.
useHoverIntent is not a function or its return value is iterable
Importing default import instead of named import.
fix
Use import { useHoverIntent } from 'react-use-hoverintent'
Upgrade
Version history
1.3.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/natelindev/react-use-hoverintent ↗
packagehttps://www.npmjs.com/package/react-use-hoverintent ↗
react-use-hoverintent — npm install react-use-hoverintent · libregistry