{"id":20778354,"url":"https://github.com/natelindev/react-use-hoverintent","last_synced_at":"2025-09-12T15:52:22.552Z","repository":{"id":40670593,"uuid":"265242194","full_name":"natelindev/react-use-hoverintent","owner":"natelindev","description":"React custom hook for hoverIntent","archived":false,"fork":false,"pushed_at":"2025-08-22T17:23:57.000Z","size":254,"stargazers_count":26,"open_issues_count":15,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-27T10:31:32.733Z","etag":null,"topics":["hook","hooks","hover","intent","react","reacthooks"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-hoverintent","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/natelindev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-05-19T12:33:06.000Z","updated_at":"2024-08-10T00:55:56.000Z","dependencies_parsed_at":"2024-01-09T19:52:55.818Z","dependency_job_id":"ebbbe85a-1dcc-4576-b744-fae8ce2f308a","html_url":"https://github.com/natelindev/react-use-hoverintent","commit_stats":{"total_commits":59,"total_committers":7,"mean_commits":8.428571428571429,"dds":0.5932203389830508,"last_synced_commit":"cc266a5a0786b7f18458685a9657d7d7b0251291"},"previous_names":["llldar/react-use-hoverintent"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/natelindev/react-use-hoverintent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natelindev%2Freact-use-hoverintent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natelindev%2Freact-use-hoverintent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natelindev%2Freact-use-hoverintent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natelindev%2Freact-use-hoverintent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/natelindev","download_url":"https://codeload.github.com/natelindev/react-use-hoverintent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natelindev%2Freact-use-hoverintent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274832179,"owners_count":25358015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hook","hooks","hover","intent","react","reacthooks"],"created_at":"2024-11-17T13:21:03.732Z","updated_at":"2025-09-12T15:52:22.503Z","avatar_url":"https://github.com/natelindev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003ch2 align=\"center\"\u003eReact useHoverIntent\u003c/h2\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Downloads\" href=\"https://github.com/natelindev/react-use-hoverintent/\"\u003e\n    \u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dt/react-use-hoverintent?style=for-the-badge\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://github.com/natelindev/react-use-hoverintent/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/natelindev/vlepo?style=for-the-badge\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nreact-use-hoverintent is a react hook which allows you to use classic hoverintent behavior in modern, react way.\n\n\"hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.\"\n\nBuilt with typescript, with official typing, with zero dependency, transpiled to es5.\n\nInspired by [jquery-hoverintent](https://github.com/briancherne/jquery-hoverIntent) [react-hoverintent](https://www.npmjs.com/package/react-hoverintent)\n\n## Installation\n\n```bash\nyarn add react-use-hoverintent\n```\n\nor\n\n```bash\nnpm install react-use-hoverintent\n```\n\n## Options\n\n`ref`: the react element ref which you want hoverintent to be applied.\n\n`timeout` : A simple delay, in milliseconds, before the `onMouseOut` callback is fired. If the user mouses back over the element before the timeout has expired the `onMouseOut` callback will not be called (nor will the `onMouseOver` callback be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return.\n\nDefault `timeout: 0`\n\n`sensitivity` : If the mouse travels fewer than this number of pixels between polling intervals, then the `onMouseOver` callback will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive.\n\nDefault `sensitivity: 6`\n\n`interval` : The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the `onMouseOut` callback can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible `onMouseOver` call, but also increases the time to the next point of comparison.\n\nDefault `interval: 100`\n\n## Usage\n\nBasic usage\n\n```javascript\nimport React from \"react\";\nimport { useHoverIntent } from \"react-use-hoverintent\";\n\nexport const MyFunctionalComponent = (props) =\u003e {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent();\n  return \u003cdiv ref={intentRef} className={`${isHovering ? \"hover\" : \"\"}`}\u003e\u003c/div\u003e;\n};\n```\n\nWith options\n\n```javascript\nimport React from \"react\";\nimport { useHoverIntent } from \"react-use-hoverintent\";\n\nexport const MyFunctionalComponent = (props) =\u003e {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent({\n    timeout: 100,\n    sensitivity: 10,\n    interval: 200,\n  });\n  return \u003cdiv ref={intentRef} className={`${isHovering ? \"hover\" : \"\"}`} /\u003e;\n};\n```\n\nWith ForwardRef\n\n```js\nimport React from \"react\";\nimport { useHoverIntent } from \"react-use-hoverintent\";\n\nexport const MyFunctionalComponent = React.forwardRef((props, ref) =\u003e {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent({ ref });\n  return \u003cdiv ref={intentRef} className={`${isHovering ? \"hover\" : \"\"}`} /\u003e;\n});\n```\n\nWith Custom UI lib\n\nCheck if they have `innerRef` prop or forwarded ref\n\n```javascript\nimport React from \"react\";\nimport { useHoverIntent } from \"react-use-hoverintent\";\n\nexport const MyFunctionalComponent = (props) =\u003e {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent();\n  return (\n    \u003cCard\n      innerRef={intentRef}\n      className={`${isHovering ? \"hover\" : \"\"}`}\n    \u003e\u003c/Card\u003e\n  );\n};\n```\n\nAfter v1.2.9\n\nWith custom hover state control\n\n```javascript\nimport React, { useCallback } from \"react\";\nimport { useHoverIntent } from \"react-use-hoverintent\";\n\nexport const MyFunctionalComponent = (props) =\u003e {\n  const [isHovering, intentRef, setIsHovering] = useHoverIntent();\n\n  const mouseOverHandler = useCallback(() =\u003e {\n    () =\u003e setIsHovering(true);\n  }, [setIsHovering]);\n\n  const mouseOutHandler = useCallback(() =\u003e {\n    () =\u003e setIsHovering(false);\n  }, [setIsHovering]);\n\n  return (\n    \u003c\u003e\n      \u003cdiv ref={intentRef} className={`${isHovering ? \"hover\" : \"\"}`} /\u003e\n      \u003ctextarea onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nAfter v1.3.0\n\nuse version of your desire\n\nindex.js - commonjs\n\n\\*.cjs - commonjs\n\n\\*.esm.js - es module\n\n\\*.min.\\* minified version\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnatelindev%2Freact-use-hoverintent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnatelindev%2Freact-use-hoverintent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnatelindev%2Freact-use-hoverintent/lists"}