{"_id":"@alemesa/react-use-intersection-observer","_rev":"4-45736b298cfb577e4ae9f3836b4882c2","name":"@alemesa/react-use-intersection-observer","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@alemesa/react-use-intersection-observer","version":"1.0.0","description":"React Hook that uses the intersection observer API","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alemesa/react-use-intersection-observer.git"},"keywords":["intersection observer","react","hook","visibility"],"author":{"name":"Alejandro Mesa","email":"notalemesa@gmail.com","url":"https://alemesa.com/"},"license":"MIT","bugs":{"url":"https://github.com/alemesa/react-use-intersection-observer/issues"},"homepage":"https://github.com/alemesa/react-use-intersection-observer#readme","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"react":"^16.8.1"},"gitHead":"6d77180686cd99275e9cfbb0cfe86bd722f74b09","_id":"@alemesa/react-use-intersection-observer@1.0.0","_nodeVersion":"8.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-FPdcqelubTOGXQTOc1ZmXWmyJyO9baDbXBPCrToQD6u6llzRzb5KMkmY6Zjfcb/aKPPJktZcE7VSIKElFXwULQ==","shasum":"ec926e5c09700ff01d21208d64a757fda47fbcc2","tarball":"https://registry.npmjs.org/@alemesa/react-use-intersection-observer/-/react-use-intersection-observer-1.0.0.tgz","fileCount":4,"unpackedSize":2930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr06JCRA9TVsSAnZWagAAhnUP/ROBF7myfbl6BUFjoVZC\nJbA/RTcLJFbhkXUFLGg3PBWHE3zvXi15IWCKLid3Ct420n+SlR3FDNTDIGdl\n48mSFe+CaFvB33J5zxtbi2+x1ySPI7Fij5G4yP+ErIKv80BSbenWRPkg0DAg\n6m01l4xHDTgpTvdWvn6oaxkBkIcGLlIPoeAc23fS7AVcK2Pre0A3l/njsOm+\nkFWld7FvmH8b+pcp1FtK3CckAw8rzDJv78dnyxCTf3Zae+7FBCI+r0WeKFzg\n4toyYpuURMiUGQeq6mXu4+w3ZOa1CaSCtq2VFIXJUw6Hi5/5wTsxuJ/7tAZa\nBlrofVOfiABiJL761n+2cnc7WaU9NifLOE6Gohe9tIR2gNMgQk1m3S/ws0EE\nDNZPWFGYDF0DRk9ZAWdRkPvD2o1F4x1tyDMUgAMkRfNniyMctNICmkr26m4j\nid1LnsbHw7VbfSrM4tNL6mhYjiOCpP98IBt7huT/ybyu6T5hj+rWNT4eOzN3\nXtrj4Ins0vez1x1ZyhHmrTPkG7XUhs4zfxihgI1B3DmFtP9PMJ5HTMf/E11l\nczg5naa2Xxr0Hov8cr54an+7sKMwVDfEv5oNIG/zjU+TV8thCrxwhYTnjRL1\nxHWbaLWR/kX21T+wutnKPslMV1jIgbfZw+oD1OTVRRYf/i6KWfAGNKxYgbC8\nQHy0\r\n=c4Y1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZNqO8xEUOlCk9ymo3/gNqN0+ebWKmoj/xei0SWdyBYQIhAJpjqMQi80eV2q7GWLzguXfs9aDqv8hFy6fYrGQ82Pv4"}]},"maintainers":[{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"}],"_npmUser":{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-intersection-observer_1.0.0_1554992775073_0.916493270110581"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alemesa/react-use-intersection-observer","version":"1.0.1","description":"React Hook that uses the intersection observer API","main":"index.js","scripts":{"major":"npm version major","minor":"npm version minor","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alemesa/react-use-intersection-observer.git"},"keywords":["intersection observer","react","hook","visibility"],"author":{"name":"Alejandro Mesa","email":"notalemesa@gmail.com","url":"https://alemesa.com/"},"license":"MIT","bugs":{"url":"https://github.com/alemesa/react-use-intersection-observer/issues"},"homepage":"https://github.com/alemesa/react-use-intersection-observer#readme","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"react":"^16.8.1"},"gitHead":"893ea276fc509bc3aa56b3edea44ae74c11d3271","_id":"@alemesa/react-use-intersection-observer@1.0.1","_nodeVersion":"8.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-MK1JNHiNvIIWikjwqj5ICP441/0lvt0c8uzomPt5XV9aHvsNSrZkz1kJZ5fCS4FX5lUG9Jm68qqUxUQ7UaUtYw==","shasum":"8b2791f6ff9e2fa26bcb4db6902306799a0bfa0a","tarball":"https://registry.npmjs.org/@alemesa/react-use-intersection-observer/-/react-use-intersection-observer-1.0.1.tgz","fileCount":4,"unpackedSize":4114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsko4CRA9TVsSAnZWagAA2FYP/0Jypw8kjdfWFSn2oO5e\nSOf8ElRSnW0v7vXyMdm9f5TEcGJ8sxbMn4lQM76e+ueHk5bhrFrEVuxie7Hs\nH0YqKXyeT55Wx5M8hqEpxWVOv9AKuLYE7IvzTCW19h5UKGK1TNJk2J+HxamA\nLizVE9QeMdbckI/Eebr79H/Tn2WrVi7NRNuMEVbm/Gf/h2H3PdL0Mkzbe1KN\nKPAf9kqK14tdSppiZ/1f53aNP9/19x8acYmdifoWwuPCk7ssXxxfxdKVjXEG\n+rOcYXD1OOUUWsvyAeXAhqtbRRU7QtrNTKd/dbexne9aAFQAwgr5OEIMaVbI\nhOoZJixea3zzymgfOI/auv7+AEaSyb+eO+BaP0Q0VwMD94TCHJNB+N2F+6+G\nqAO0mm4h1q+kzlZmZfFkN/YIKqsQzTtKXP7a+OYUatanDJYtRc+Hanf87IcD\nV2G79FAalMS+L9T+mJUSXeOWxPM8pgwwPZTNax0B94Ut+C5dLwy9Xf+VPd6t\nTzAAf3kHPaw9h+AdtvVdC2ozBwNSL2l8CcxojDL+75+vndNy7D++7QBV6cEX\nDDAFoZTitA0MHl7WTAo0PqOKf0SdwgFYElB4JmD+4cxexdxAT22HMqTabrzW\nY2HFPHWHUzRWuP/PjCsHLRaIXPuAGwGsmN623y6HPc8osS5G6s6fSMmZ8vSM\nzccH\r\n=KCmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdwz5nl+be+PKXsFck2EOeS9VERB+QFM/QV3ldAOi2DwIhAMPqGtIe0XZ1GhKkUl1RRImehfvtCSBUR3ddNLoIM0+D"}]},"maintainers":[{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"}],"_npmUser":{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-intersection-observer_1.0.1_1555188279428_0.7747404612886966"},"_hasShrinkwrap":false},"1.0.2":{"name":"@alemesa/react-use-intersection-observer","version":"1.0.2","description":"React Hook that uses the intersection observer API","main":"index.js","scripts":{"major":"npm version major","minor":"npm version minor","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alemesa/react-use-intersection-observer.git"},"keywords":["intersection observer","react","hook","visibility"],"author":{"name":"Alejandro Mesa","email":"notalemesa@gmail.com","url":"https://alemesa.com/"},"license":"MIT","bugs":{"url":"https://github.com/alemesa/react-use-intersection-observer/issues"},"homepage":"https://github.com/alemesa/react-use-intersection-observer#readme","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"react":"^16.8.1"},"gitHead":"b8306750366774d8aa3d6107a9bfd837d88b36be","_id":"@alemesa/react-use-intersection-observer@1.0.2","_nodeVersion":"12.1.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-rbLDiv77Rp2dBs/5et1ymqUjHr6tVDQDxyeoLysvovQ1nh7DiVSatA1DnxfLw3SzE0JkXE6owNwJJcBMs92N1w==","shasum":"7b316ed7062be1df054bc96f67f99164bb6743e3","tarball":"https://registry.npmjs.org/@alemesa/react-use-intersection-observer/-/react-use-intersection-observer-1.0.2.tgz","fileCount":4,"unpackedSize":5159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/KLUCRA9TVsSAnZWagAATM4P/1iL3DO6b3ZKTSr8Hh9T\n3QLexxMlT5tkXd7V7V7Cj0THQGnxkocX2+bxrQSiv6nVLdeASuyndrxz50Z6\njaaqPWbM/6Lv4367X8A4Ql1VWywkfolB7X8RNUMnyNE+TFE5vH8Hu50uaM5q\nBFn8hxu7pZm4tZL4iklZ+IrtIrzYyVk/7xIUbML2366OS78G1/h2H7yUP7ZC\nwmaPB/xM7J7lTx9R1jI1nVzCGXVdzSjUl4gYgdUZu5sQGvMvKjhEsQZy2LTJ\nBqyouvdue8lliF0AknrVvzZT849F+ZAkJooqb+aagQUlw3/OE4fmMY1NkOJC\n1XUUNEstATJdOq2X6c1eoLKJb2x0M3T2AHTioU8Zy47aPYBU3XocIL10Zx6W\nVBRAtCSefpYz7gAGpL1w4+Gy93XLeTnttRe6gKxfiFFmyc3q8vLRWapp/M6/\n9ZULd601ULl3fanq2cN/y5rQya7efPY01ZOu78cSYi5aVLdK3c57THMqzM2L\nnk4x1JW1AV1Ck4GbO7qAxfdmTBsUmzx/ePxTqo3mHsIRutnTsqar8GcFTi/e\nKNhI/QVcxEX74LjoGP0GwZC15Ifac0r486LvZMsCFuu/LLGorLyvwJeKpTHD\nq50c2BlIwahTOJgfsCCYWxEJXNsXibOY5OMxxY8zRQxlCQG8MTtGxOb0/McK\n00kv\r\n=oQIW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVYnlNR10tVxrcg9IH7KMONBDMb9Q5HFH1uzKOPn6zRQIgdEyfo67dFoRh2FgLZ30+KjaKwNE+5540ehbGsj3agak="}]},"maintainers":[{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"}],"_npmUser":{"name":"alemesa","email":"notalemesa@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-intersection-observer_1.0.2_1560060627463_0.6077987828722968"},"_hasShrinkwrap":false},"1.0.3":{"name":"@alemesa/react-use-intersection-observer","version":"1.0.3","description":"React Hook that uses the intersection observer API","main":"index.js","scripts":{"major":"npm version major","minor":"npm version minor","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alemesa/react-use-intersection-observer.git"},"keywords":["intersection observer","react","hook","visibility"],"author":{"name":"Alejandro Mesa","email":"notalemesa@gmail.com","url":"https://alemesa.com/"},"license":"MIT","bugs":{"url":"https://github.com/alemesa/react-use-intersection-observer/issues"},"homepage":"https://github.com/alemesa/react-use-intersection-observer#readme","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"react":"^16.8.1"},"gitHead":"9cf9a4df3089c107075b4963216a254e668a39e1","_id":"@alemesa/react-use-intersection-observer@1.0.3","_nodeVersion":"12.1.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-NGGEvgfG257jcjmPUu55Vzl0dO/fJG5GJ9+Hn+nAX4cH75WgeJVmY/tD5FPB6BTkQftMen5OZ8jguqBtCJpTtQ==","shasum":"eee87656a0367520a9af627a35a54bc3b281392d","tarball":"https://registry.npmjs.org/@alemesa/react-use-intersection-observer/-/react-use-intersection-observer-1.0.3.tgz","fileCount":4,"unpackedSize":6678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/vlQCRA9TVsSAnZWagAAIZMP/3A6LKbpmpRGpfyo1jBC\n0CEATzMJBo80MhXYFZK4VXbmRcMd7tNl7PrhBUyaPoZRHCwCSMhw1TXd5tcL\n3u/BGMte5fVlrm9c0hIhD16hcdERkilaWwA2WVtAQsuEhrCgcbLvSRaH8Tx3\nvRwGRBLD+JdAIWKLO/rLzH/DYZHcQnmrQ2mEclS1EJsfToB0m51ed8CuW7bz\nidd+Li0MCUHjiK2jHwUqzdKiOVzz45sp74EVaLNEBlQnhdL0lhQ9k8dqOCzk\nZL6nJU09RUT4C8bex7u1VFSVIq5p4jKMm7vsVyY5F9YoShMJdD9gCRXo32gV\n4nVPoWXoX24sMfjp4j01ZJGPBcu26SVCW5sm7ME5f/1GspqZHFio3g+U0Nq0\nJYdgHapur3d+FxIrQNCgWl0VvZ5ePm2EUJD0qlVSxYtdMZq70tvx/NUjT4J1\n3H1iOtZovz7LrCopddJe46qtb8jIGi2h845N5fqr4HtToaxf+ijm6R03nhHP\nLBKfvvDRNwWwEUIdCl3ccuPLA41PbCn8/5gHSfQ0zztZf1Ch8S5lKtxtPjpM\nQaLWOUS53EJQzCw4++rbViUzFTuA9HpXOEKmwOGgQs9APh3vTZa+z2Lm8nMP\ntc9GXVk0Q8pGj/ioLakLFRjnHCni5ttBQS+jjiuagXrcoyNgo6AZ7Curajdx\nXS4l\r\n=Rq8v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3QfxbiHtsgR7WVAlMpW3IvViWDSi33uHXLbXj1Bu5awIhAJWYOerQFsTW0mWgLrvW55W7Fi64hvqKXxt+iU3hpa2Z"}]},"maintainers":[{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"}],"_npmUser":{"name":"alemesa","email":"notalemesa@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-intersection-observer_1.0.3_1560213839492_0.7454353850524484"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-11T14:26:14.875Z","1.0.0":"2019-04-11T14:26:15.239Z","modified":"2022-04-04T12:37:26.024Z","1.0.1":"2019-04-13T20:44:39.551Z","1.0.2":"2019-06-09T06:10:27.657Z","1.0.3":"2019-06-11T00:43:59.648Z"},"maintainers":[{"name":"alemesa","email":"alejandro.mesa1991@gmail.com"}],"description":"React Hook that uses the intersection observer API","homepage":"https://github.com/alemesa/react-use-intersection-observer#readme","keywords":["intersection observer","react","hook","visibility"],"repository":{"type":"git","url":"git+https://github.com/alemesa/react-use-intersection-observer.git"},"author":{"name":"Alejandro Mesa","email":"notalemesa@gmail.com","url":"https://alemesa.com/"},"bugs":{"url":"https://github.com/alemesa/react-use-intersection-observer/issues"},"license":"MIT","readme":"# react-use-intersection-observer\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)\n\n[![Version](https://badge.fury.io/js/%40alemesa%2Freact-use-intersection-observer.svg)](https://badge.fury.io/js/%40alemesa%2Freact-use-intersection-observer)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n![Size](https://img.shields.io/bundlephobia/min/@alemesa/react-use-intersection-observer.svg)\n\n[![NPM](https://nodeico.herokuapp.com/@alemesa/react-use-intersection-observer.svg)](https://npmjs.com/package/@alemesa/react-use-intersection-observer)\n\n[React Hook](https://reactjs.org/docs/hooks-intro.html) that uses the intersection observer API\n\n#### Usage\n\n```bash\nnpm i @alemesa/react-use-intersection-observer\n```\n\n---\n\n- Example Codesanbox:\n\n[![Edit react-use-intersection-observer](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/smoosh-wave-4ojbk?fontsize=14)\n\n---\n\n- Simple Example:\n  Element will trigger a single time and unobserve\n\n```javascript\nimport React, { useRef, useEffect } from \"react\";\nimport useIntersectionObserver from \"@alemesa/react-use-intersection-observer\";\n\nconst Header = React.memo(() => {\n  const elRef = useRef(null);\n\n  // Pass a reference to the custom hook\n  const intersected = useIntersectionObserver(elRef);\n\n  useEffect(() => {\n    if (intersected) {\n      // Intersected - do whatever you want\n      console.log(\"Intersected element\");\n    }\n  }, [intersected]);\n\n  return <h3 ref={elRef}>Example</h3>;\n});\n\nexport default Header;\n```\n\n---\n\n- Custom Example:\n  Element will trigger multiple time\n\n```javascript\nimport React, { useRef, useEffect } from \"react\";\nimport useIntersectionObserver from \"@alemesa/react-use-intersection-observer\";\n\nconst Header = React.memo(() => {\n  const elRef = useRef(null);\n\n  // Pass a reference to the custom hook and custom options\n  const intersected = useIntersectionObserver(elRef, {\n    triggerOnce: false,\n    threshold: 0.3,\n    rootMargin: \"-150px\"\n  });\n\n  useEffect(() => {\n    if (intersected) {\n      // Intersected - do whatever you want\n      console.log(\"Intersected element\");\n    }\n  }, [intersected]);\n\n  return <h3 ref={elRef}>Example</h3>;\n});\n\nexport default Header;\n```\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore -->\n<table><tr><td align=\"center\"><a href=\"https://alemesa.com\"><img src=\"https://avatars3.githubusercontent.com/u/14832910?v=4\" width=\"100px;\" alt=\"Alejandro Mesa\"/><br /><sub><b>Alejandro Mesa</b></sub></a><br /><a href=\"#infra-alemesa\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/alemesa/react-use-intersection-observer/commits?author=alemesa\" title=\"Code\">💻</a></td><td align=\"center\"><a href=\"https://github.com/DonghyukJacobJang\"><img src=\"https://avatars2.githubusercontent.com/u/16929537?v=4\" width=\"100px;\" alt=\"Donghyuk (Jacob) Jang\"/><br /><sub><b>Donghyuk (Jacob) Jang</b></sub></a><br /><a href=\"https://github.com/alemesa/react-use-intersection-observer/commits?author=DonghyukJacobJang\" title=\"Code\">💻</a></td></tr></table>\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}