{"id":26168,"library":"react-use-hoverintent","title":"react-use-hoverintent","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/natelindev/react-use-hoverintent","tags":["javascript","hover","hoverintent","delay","react","hooks","jquery","typescript"],"install":[{"cmd":"npm install react-use-hoverintent","lang":"bash","label":"npm"},{"cmd":"yarn add react-use-hoverintent","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-use-hoverintent","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export only. ESM module available via .esm.js path from v1.3.0.","wrong":"import useHoverIntent from 'react-use-hoverintent'","symbol":"useHoverIntent","correct":"import { useHoverIntent } from 'react-use-hoverintent'"}],"quickstart":{"code":"import { useHoverIntent } from 'react-use-hoverintent';\nimport React from 'react';\n\nexport const MyComponent = () => {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent({\n    timeout: 150,\n    sensitivity: 7,\n    interval: 120\n  });\n  return (\n    <div\n      ref={intentRef}\n      style={{\n        width: 200,\n        height: 200,\n        background: isHovering ? 'blue' : 'gray',\n        transition: 'background 0.3s'\n      }}\n    >\n      {isHovering ? 'Hovering' : 'Not hovering'}\n    </div>\n  );\n};","lang":"javascript","description":"Basic usage of useHoverIntent hook with custom options, showing isHovering state and ref."},"warnings":[{"fix":"Upgrade to v1.2.9+ and ensure array destructuring order matches documentation: [isHovering, intentRef, setIsHovering]","message":"v1.2.9 reversed the array return order to match earlier versions, potentially breaking code that depended on v1.2.8's order.","severity":"breaking","affected_versions":">=1.2.8 <1.2.9"},{"fix":"Avoid using setIsHovering unless absolutely necessary; prefer relying on hover intent callbacks.","message":"The setIsHovering setter exposed since v1.2.8 allows direct mutation of hover state, which can desync from actual mouse events.","severity":"gotcha","affected_versions":">=1.2.8"},{"fix":"Pass ref option to useHoverIntent({ref: forwardedRef}) and ensure intentRef is used on DOM element.","message":"Using ref option with forwarded refs requires careful merging to avoid losing the original ref binding.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure useHoverIntent is called inside a React functional component. Check that intentRef is correctly destructured: const [isHovering, intentRef] = useHoverIntent();","cause":"Calling useHoverIntent outside a React functional component or before component mount.","error":"TypeError: can't access property 'current', intentRef is undefined"},{"fix":"Use React.forwardRef on custom components and pass intentRef to the underlying DOM element.","cause":"Using intentRef on a custom component without forwardRef.","error":"Warning: Function components cannot be given refs. Attempts to access this ref will fail."},{"fix":"Use import { useHoverIntent } from 'react-use-hoverintent'","cause":"Importing default import instead of named import.","error":"useHoverIntent is not a function or its return value is iterable"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}