{"_id":"@biggerpixel/use-on-click-outside","name":"@biggerpixel/use-on-click-outside","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@biggerpixel/use-on-click-outside","version":"1.0.0","description":"Custom React Hook used to detect clicks outside of a specified element.","types":"lib/index.d.ts","main":"lib/index","scripts":{"clean":"rm -rf ./lib","test":"jest --config jest.config.json","build":"npm run clean && tsc","format":"prettier --write \"src/**/*.{ts,js}\"","lint":"tslint -p tsconfig.json"},"repository":{"type":"git","url":"git+https://github.com/BiggerPixel/useonclickoutside.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/BiggerPixel/useonclickoutside/issues"},"homepage":"https://github.com/BiggerPixel/useonclickoutside#readme","devDependencies":{"@types/jest":"^29.1.2","@types/react":"^18.0.21","jest":"^29.1.2","prettier":"^2.7.1","ts-jest":"^29.0.3","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.8.4"},"peerDependencies":{"react":">=16.8.x"},"gitHead":"916d287d82b3c1ef71c7670205373b53f7d31186","_id":"@biggerpixel/use-on-click-outside@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-mMlE8r2fxuW2tUi7IlBiCuwyRcCHdVgr+MWlyrHRDSvVWM5Z/dKnFTDWuyr32u2FZEFaIsZ4bz40CIlc8I+EGQ==","shasum":"6cad2499c24c345c3bed12bc8e310ba03c8c3779","tarball":"https://registry.npmjs.org/@biggerpixel/use-on-click-outside/-/use-on-click-outside-1.0.0.tgz","fileCount":4,"unpackedSize":3056,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5o4lErXMHWZo1lyWvQPn77MGMqHiJLwCZAaRqrnTMaAiEA0ZW+vjh1M1v7ZY3OkkktMFogki+EPa4abbsw3Azoek4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRXgmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa2A/9EtiNLZ3Zgz96j/91DRiQgn5OxyqHoAoHpaLDbhMj7n4XNave\r\nOlvz9YMoO9oSt1OuykpU/T/DwuuoY66h0TmO5T/0rf6lWGZHaPjt5xNkEpg7\r\nTf1Y9Wqq05IcUK/5yUSkXNiKlOERPdJI+QVZfbhk+LiqKy1+SLbi4aeBrRmj\r\nCJq0SG2aEsf/XVY2yXgWIg2n7paWgKEul769fFDOFEgsi0Q7gBnHhDgZ64hT\r\ngKtRuqOJCaPyXQQoWdDmVZl+PUKlfnM4COA/OMioqSSUhUNbDcE9p9zpO1ad\r\nPVAs5dT4nTECJnv/x9iSjHYqkL+Pxqz91ZfdcuqAuXwn5LsbryytVE6OjVrt\r\ncs7dec3lab7yQx0vLFYhUfgYTqM13afHm+mE4l/1z9M8AHNby9W69HnHSOaL\r\nJMYXN8xLN0Lxcf3GDwn8UgwrQQg61rzkrNL0U3JGlAUUO7nimKLBM1jiWb6C\r\nfKAEMoE/LOLo7BKhY1gRXftm9qmPIjZ3CAXxbcpjWzHGwCUHReWbufCrf2JK\r\nmrZMMlBBTs/TbM78695Xd4u4O5crziGfmqZEOyfxGzrDOWckEnxUon94zL6c\r\nfzGyTaTZ4Y/hlmaytOxVKCJHnjUIHLJ1iRMejSgYuI+Ojctw16J4Lf4RlTPZ\r\nOl+Unod8fyd2uJjD5KUgHwpu5KkDfE1H2zE=\r\n=YGIu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"simonalmers","email":"simon@simonalmers.com"},"directories":{},"maintainers":[{"name":"simonalmers","email":"simon@simonalmers.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-on-click-outside_1.0.0_1665497125958_0.8184106721195528"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-11T14:05:25.887Z","1.0.0":"2022-10-11T14:05:26.131Z","modified":"2022-10-11T14:05:26.325Z"},"maintainers":[{"name":"simonalmers","email":"simon@simonalmers.com"}],"description":"Custom React Hook used to detect clicks outside of a specified element.","homepage":"https://github.com/BiggerPixel/useonclickoutside#readme","repository":{"type":"git","url":"git+https://github.com/BiggerPixel/useonclickoutside.git"},"bugs":{"url":"https://github.com/BiggerPixel/useonclickoutside/issues"},"license":"ISC","readme":"# use-on-click-outside\n\n## Usage\n\n---\n\n```\nnpm i @biggerpixel/use-on-click-outside\n```\n\n```typescript\nimport React, { useRef } from 'react';\nimport useBoolState from '@biggerpixel/use-bool-state';\nimport useOnClickOutside from '@biggerpixel/use-on-click-outside';\n\nconst Component = () => {\n  const elementWrapper = useRef<HTMLDivElement>(null);\n  const [isOpen, toggleIsOpen] = useBoolState(false);\n\n  useOnClickOutside(elementWrapper, toggleIsOpen);\n\n  return (\n    isOpen && (\n      <div ref={elementWrapper}>\n        <h2>Content!</h2>\n        <p>(Click outside to close)</p>\n      </div>\n    )\n  );\n};\n\nexport default Component;\n```\n","readmeFilename":"README.md"}