{"_id":"@azeagakhan/clickaway","_rev":"6-b1538d69eb4d81b2a1a4159bcec3eafc","name":"@azeagakhan/clickaway","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@azeagakhan/clickaway","version":"1.0.0","keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","_id":"@azeagakhan/clickaway@1.0.0","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"homepage":"https://github.com/agakhansr/clickaway#readme","bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"dist":{"shasum":"0f692acbe25aa1f7c6f6a70274a54c7ef89c0fce","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.0.0.tgz","fileCount":9,"integrity":"sha512-q7BRlaHnlooGd4Bsz0m9qDbXIAv/tqjYoCv5DGFdtpL/SHTSmObozgeA/eFo9Yu3ePlw7ZI3KnBnKKgCesOdTA==","signatures":[{"sig":"MEUCIQCOCUtYW0IiDaCXFBwOWwo61X5U/6dW9lNowW0LWRqbZgIgTZCQS1/o2bWHj7m5CAs4WapILSfO9549312uSeLnpe8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19763},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"0b566486ff15b8f5c2d6c2a8596a04664c459c9e","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"repository":{"url":"git+https://github.com/agakhansr/clickaway.git","type":"git"},"_npmVersion":"11.6.3","description":"A React hook for detecting clicks outside of a component","directories":{},"_nodeVersion":"22.13.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.0.0","eslint":"^8.0.0","esbuild":"^0.19.0","ts-jest":"^29.0.0","typescript":"^5.0.0","@types/jest":"^29.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@testing-library/dom":"^9.0.0","@testing-library/react":"^14.0.0","@typescript-eslint/parser":"^6.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/clickaway_1.0.0_1764767710005_0.11421665355843014","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@azeagakhan/clickaway","version":"1.0.4","keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","_id":"@azeagakhan/clickaway@1.0.4","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"homepage":"https://github.com/agakhansr/clickaway#readme","bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"dist":{"shasum":"089ea87a6fd92c260842b692c766b41c8f9f6b77","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.0.4.tgz","fileCount":4,"integrity":"sha512-Tl7yP3Uu9EGjye16dro4VSX+P4hJ+iSDGPIXjkKekJwrk337ZmQc/nHJ2yVnOhAbqwU5J5v7iwF0Q0NzUc0jPA==","signatures":[{"sig":"MEUCIAxc+EpXMJ8LDYz+RSVcMflUik2jjf7ExkE5lvqjUS7bAiEAn9wdRgWP4JtJTZkHGXHRIua+ziXITVrrJh2ph7wCCPs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6419},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"e309fa93017e4e70c618a9663ff78f87c13693ad","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"repository":{"url":"git+https://github.com/agakhansr/clickaway.git","type":"git"},"_npmVersion":"10.8.2","description":"A React hook for detecting clicks outside of a component","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.56.0","ts-jest":"^29.1.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@testing-library/dom":"^9.3.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.17.0","@typescript-eslint/eslint-plugin":"^6.17.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/clickaway_1.0.4_1764769504521_0.0013954786793484164","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@azeagakhan/clickaway","version":"1.0.6","keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","_id":"@azeagakhan/clickaway@1.0.6","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"homepage":"https://github.com/agakhansr/clickaway#readme","bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"dist":{"shasum":"e54e13568a65948eccf2ec28059cc5933bed253d","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.0.6.tgz","fileCount":4,"integrity":"sha512-rW8odL17d54omXTf4sPznkrkMn/eymhIPWiweETsLNzpftafpy8EnBjuz7PvkHoyrgvfaSEQOqfw8mEbzommmw==","signatures":[{"sig":"MEUCIQCdHuUq4PjK37UcI3HrnZ2HRhZmeBjC02elhZgl84+F3AIgKKHYi2Mz8DFuGnPWPaUi/tDc+s5crXA2ykvLu3YH92Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6419},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"52f56078ad9cbff36cb567f3dc2deaaac531694e","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"repository":{"url":"git+https://github.com/agakhansr/clickaway.git","type":"git"},"_npmVersion":"10.8.2","description":"A React hook for detecting clicks outside of a component","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.56.0","ts-jest":"^29.1.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@testing-library/dom":"^9.3.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.17.0","@typescript-eslint/eslint-plugin":"^6.17.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/clickaway_1.0.6_1764769658958_0.12704691165663906","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"@azeagakhan/clickaway","version":"1.0.9","keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","_id":"@azeagakhan/clickaway@1.0.9","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"homepage":"https://github.com/agakhansr/clickaway#readme","bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"dist":{"shasum":"eab9487c1e3ed46efbe80c33385dab8bfd131670","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.0.9.tgz","fileCount":4,"integrity":"sha512-8jtzM0HDQ8ckFPPF+hOZ0dGIpYQG+aBYOi0zb/MFlGaWM3ndvmoykVd4avcCs/9VDPTzEJDZRH9NZ6ZH35r71w==","signatures":[{"sig":"MEYCIQDFUglE1797IRCIJs9mn3rDr92ewIyj7fpXks1JRr8dMAIhANytCaG+cbZNWvzkRF3EaSYdBC6mYqywlKYJc8lhyYG6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6419},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"46daf60585cb9ef5ff8af025a4b53c4596dae026","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"repository":{"url":"git+https://github.com/agakhansr/clickaway.git","type":"git"},"_npmVersion":"10.8.2","description":"A React hook for detecting clicks outside of a component","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.56.0","ts-jest":"^29.1.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@testing-library/dom":"^9.3.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.17.0","@typescript-eslint/eslint-plugin":"^6.17.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/clickaway_1.0.9_1764769817977_0.05772908754458683","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@azeagakhan/clickaway","version":"1.1.1","keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","_id":"@azeagakhan/clickaway@1.1.1","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"homepage":"https://github.com/agakhansr/clickaway#readme","bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"dist":{"shasum":"dcf0e93034e42b5f4ec074acb39296b6788111be","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.1.1.tgz","fileCount":4,"integrity":"sha512-e9qYvUF5vOd8aEY2TJu5xyHCQYni1KeKcP5dWElF/qaQmVmOlx4B99aQsrx05p8m/uZ/0x5xhLluTASlH8+nsg==","signatures":[{"sig":"MEUCIDBmM0InOI8auXHhDjZUXF4cZBFHd3xLfCGAoEqtpsyTAiEA28xhal/t7sUsz7PlMuOC3fhX794SO0Bz5BFB4nz1ac4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6430},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"e39acb66b0210a8596530bf12eb8abe8d3949b1c","scripts":{"dev":"tsc --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"repository":{"url":"git+https://github.com/agakhansr/clickaway.git","type":"git"},"_npmVersion":"10.8.2","description":"A React hook for detecting clicks outside of a component","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.56.0","ts-jest":"^29.1.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@testing-library/dom":"^9.3.0","@testing-library/react":"^14.1.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^6.17.0","@typescript-eslint/eslint-plugin":"^6.17.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/clickaway_1.1.1_1764770093733_0.971978327165236","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@azeagakhan/clickaway","version":"1.1.2","description":"A React hook for detecting clicks outside of a component","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc","dev":"tsc --watch","test":"jest","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react","hook","outside-click","click-outside","typescript"],"author":{"name":"Agakhan SR"},"license":"MIT","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^18.2.0","@types/node":"^20.0.0","typescript":"^5.3.0","eslint":"^8.56.0","@typescript-eslint/parser":"^6.17.0","@typescript-eslint/eslint-plugin":"^6.17.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","@types/jest":"^29.5.0","ts-jest":"^29.1.0","@testing-library/react":"^14.1.0","@testing-library/dom":"^9.3.0"},"repository":{"type":"git","url":"git+https://github.com/agakhansr/clickaway.git"},"bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"homepage":"https://github.com/agakhansr/clickaway#readme","_id":"@azeagakhan/clickaway@1.1.2","gitHead":"89dd9b0018eb7236ce2b7fc2e55e33c6e117e566","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6d4CLYEAqCMY6qCHo7Yq6z0oO95l/CtNDY+yyNDbG2WSwFAEYZZthjiKhuG7n/8i9/78jBZ2kJsLKl4+Icp/+w==","shasum":"6a37e6e0e10674fc5e29a55eadaf68ab1f9189b2","tarball":"https://registry.npmjs.org/@azeagakhan/clickaway/-/clickaway-1.1.2.tgz","fileCount":4,"unpackedSize":6472,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDaihT/eJwixFuuTop4BKlpkuX6LsSmm14KH+ehogUnhgIhAJCQj/dZLC4NnyVpWqNHDy5GDYcpH44ucJIX3wg3gXJH"}]},"_npmUser":{"name":"azeagakhan","email":"agaxanist@gmail.com"},"directories":{},"maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/clickaway_1.1.2_1764770718390_0.6941068958602419"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T13:15:09.925Z","modified":"2025-12-03T14:05:19.081Z","1.0.0":"2025-12-03T13:15:10.194Z","1.0.4":"2025-12-03T13:45:04.701Z","1.0.6":"2025-12-03T13:47:39.148Z","1.0.9":"2025-12-03T13:50:18.176Z","1.1.1":"2025-12-03T13:54:53.931Z","1.1.2":"2025-12-03T14:05:18.566Z"},"bugs":{"url":"https://github.com/agakhansr/clickaway/issues"},"author":{"name":"Agakhan SR"},"license":"MIT","homepage":"https://github.com/agakhansr/clickaway#readme","keywords":["react","hook","outside-click","click-outside","typescript"],"repository":{"type":"git","url":"git+https://github.com/agakhansr/clickaway.git"},"description":"A React hook for detecting clicks outside of a component","maintainers":[{"name":"azeagakhan","email":"agaxanist@gmail.com"}],"readme":"# clickaway\n\nA lightweight React hook for detecting clicks outside of a component. Perfect for modals, dropdowns, tooltips, and other UI elements that need to close when clicked outside.\n\n## Features\n\n✨ **TypeScript Support** - Fully typed with generics for your custom elements\n📦 **Tiny Bundle** - Minimal overhead, tree-shakeable\n⚡ **Zero Dependencies** - Only requires React\n🎯 **Touch Support** - Works with both mouse and touch events\n🔄 **Enable/Disable** - Control when the hook is active\n♿ **Accessible** - Respects user preferences\n\n## Installation\n\n```bash\nnpm i @azeagakhan/clickaway\n```\n\nor with yarn:\n\n```bash\nyarn add @azeagakhan/clickaway\n```\n\n## Usage\n\n### Basic Example\n\n```jsx\nimport { useOutsideClick } from '@azeagakhan/clickaway';\nimport { useState } from 'react';\n\nexport function Dropdown() {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useOutsideClick(() => setIsOpen(false));\n\n  return (\n    <div ref={ref}>\n      <button onClick={() => setIsOpen(!isOpen)}>\n        Toggle Menu\n      </button>\n      {isOpen && (\n        <ul>\n          <li>Option 1</li>\n          <li>Option 2</li>\n          <li>Option 3</li>\n        </ul>\n      )}\n    </div>\n  );\n}\n```\n\n### With TypeScript Custom Element\n\n```tsx\nimport { useOutsideClick } from '@azeagakhan/clickaway';\n\ninterface CustomElement extends HTMLElement {\n  customMethod(): void;\n}\n\nexport function MyComponent() {\n  const ref = useOutsideClick<CustomElement>(() => {\n    console.log('Clicked outside');\n    ref.current?.customMethod();\n  });\n\n  return <div ref={ref}>Content</div>;\n}\n```\n\n### Conditional Enable/Disable\n\n```jsx\nexport function Modal({ isOpen, onClose }) {\n  const ref = useOutsideClick(onClose, isOpen); // Hook only active when modal is open\n\n  return isOpen ? <div ref={ref}>Modal Content</div> : null;\n}\n```\n\n## API\n\n### `useOutsideClick<T extends HTMLElement>(callback, enabled?)`\n\n#### Parameters\n\n- **`callback`** `() => void` - Function to execute when clicking outside the element\n- **`enabled`** `boolean` (optional, default: `true`) - Whether the hook should listen for clicks\n\n#### Returns\n\n- **`ref`** `RefObject<T>` - React ref to attach to your component\n\n## How It Works\n\nThe hook:\n1. Attaches a ref to your component\n2. Listens for `mousedown` and `touchstart` events on the document\n3. Checks if the clicked target is outside your component\n4. Calls your callback function if the click was outside\n5. Automatically cleans up event listeners on unmount\n\n## Browser Support\n\nWorks in all modern browsers that support:\n- React 16.8+ (Hooks)\n- ES2020 or transpiled equivalents\n\n## Performance Tips\n\n- Wrap your callback with `useCallback` to prevent unnecessary re-renders:\n\n```jsx\nimport { useCallback } from 'react';\nimport { useOutsideClick } from 'use-outside-click';\n\nexport function Component() {\n  const handleClickOutside = useCallback(() => {\n    console.log('Outside click');\n  }, []);\n\n  const ref = useOutsideClick(handleClickOutside);\n\n  return <div ref={ref}>Content</div>;\n}\n```\n\n## License\n\nMIT © 2024\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n# clickaway\n# clickaway\n","readmeFilename":"README.md"}