![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A React hook for detecting clicks outside of specified elements\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-on-click-outside.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-on-click-outside.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-on-click-outside?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-on-click-outside.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-on-click-outside` detects clicks outside of specified element(s) and calls your handler. Perfect for closing modals, dropdowns, popovers, tooltips, and any UI component that should dismiss when clicking elsewhere.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-on-click-outside?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with exported interfaces\n- **Multiple Refs Support** ā Pass a single ref or an array of refs (e.g., button + dropdown)\n- **Exclude Elements** ā Exclude specific elements from triggering the handler via `excludeRefs` or `shouldExclude`\n- **Mouse + Touch Support** ā Handles both `mousedown` and `touchstart` events for mobile compatibility, and suppresses the emulated mouse event that trails a tap so the handler fires once per interaction\n- **Capture Phase** ā Uses capture phase by default to avoid `stopPropagation` issues\n- **Conditional Activation** ā Enable/disable via the `enabled` option\n- **Handler Stability** ā No re-registration when handler changes\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Well Tested** ā 97.61% test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-on-click-outside\n\n# yarn\nyarn add @usefy/use-on-click-outside\n\n# pnpm\npnpm add @usefy/use-on-click-outside\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useOnClickOutside } from \"@usefy/use-on-click-outside\";\nimport { useRef, useState } from \"react\";\n\nfunction Modal({ onClose }: { onClose: () => void }) {\n const modalRef = useRef\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}