{"_id":"@andrew_mason/trigger-in-view","name":"@andrew_mason/trigger-in-view","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@andrew_mason/trigger-in-view","version":"1.0.0","description":"Utility helper to trigger callback when HTML elements are in view","main":"dist/trigger-in-view.js","module":"dist/trigger-in-view.js","scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+ssh://git@github.com/andymason/trigger-in-view.git"},"keywords":["utility","helper","intersectionobserver"],"author":{"name":"Andrew Mason","email":"andrew@coderonfire.com","url":"https://coderonfire.com"},"license":"MIT","bugs":{"url":"https://github.com/andymason/trigger-in-view/issues"},"homepage":"https://github.com/andymason/trigger-in-view#readme","devDependencies":{"typescript":"^4.6.3"},"types":"./dist/trigger-in-view.d.ts","gitHead":"1c017ab1f016052972d1f388001e14aa6f719059","_id":"@andrew_mason/trigger-in-view@1.0.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-n9bdxuoq27fM6ezkXrU6CQW5T1lVOskWY+06dwmgiZg7NNn8O7y2KAKipMaQ1LwJSfLln4+/OmypuaM19LeDcQ==","shasum":"f2d6f5398ffea717c70f752736857dd553e7e54b","tarball":"https://registry.npmjs.org/@andrew_mason/trigger-in-view/-/trigger-in-view-1.0.0.tgz","fileCount":7,"unpackedSize":8678,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGXsWjaEcbQM6+n8KQxdSRbUmPuDyx960CKstURHPfoAIhAObqhutaCeIgE43PVps8raGO9o4kvYz5x9tkk7rvJ/mF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXs1+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqluw/9F1qlMofeLAGcsLNyVg30+hi+SOqP7Z18Khf7ZIr57cJEWl9H\r\nGDaFTsL9lsuRYx+vmTyMTfPlNwMXmFXPo9PTSbMhx1gUNHBBxVQoITACTDcJ\r\ntJpCIWxShZmYPTTwqRX7Fcc/mNol6XO7P5r449Lg8nqXpUUpcCb6se1sj9M/\r\nZuk5PIuMd5R/hihx/d714tW65N3mf524BRLatxBDHRkit7pxqOnC4BzaEGim\r\nhK+mzdEIM9mqXoCXuyYz5KHzAXLHwIDwNixBMvk1IhT4Dlq02rsFKEXqcsrW\r\npnc2nmscvP0h+RBy1E35rTxrpk9zjNN0XoDNysR5V3xYjXazAAZpgGcFYc8t\r\nMZ7bqbAjHz7ZJ+qBDR5E2ZDGVv7TP5fT48pmLIZspL2q/B24aGYQ0VMQ1LXG\r\nP2pHjyqipf5NAXE9VG3HHqqeDB/kzBSgV2qss0B5LmKrmiW/uOsoW2A2uACA\r\n40lHzIEnRMnzhIlDLTM4B54OrmA4c3xq1AKG4UBMQOxjTmP3WQW8jn0lwQrn\r\ntqbod3Ry12VzAwOhd0sd29xC7+piauE0JFUFWE9/9gnCYbR5BHDvB1UxMyJY\r\nT81Q4KMOrMYCEBzYpalApzMIIJp0VypJ3A3b0yi9is6NIgKxg+s2Ea660Pso\r\nC2oQVe5kIoOHFcbOjQv+q1z3KcR/I2FIUBM=\r\n=G9/o\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"andrew_mason","email":"andrew@coderonfire.com"},"directories":{},"maintainers":[{"name":"andrew_mason","email":"andrew@coderonfire.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/trigger-in-view_1.0.0_1650380157882_0.3326065457759797"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-19T14:55:57.805Z","1.0.0":"2022-04-19T14:55:58.142Z","modified":"2022-04-19T14:55:58.257Z"},"maintainers":[{"name":"andrew_mason","email":"andrew@coderonfire.com"}],"description":"Utility helper to trigger callback when HTML elements are in view","homepage":"https://github.com/andymason/trigger-in-view#readme","keywords":["utility","helper","intersectionobserver"],"repository":{"type":"git","url":"git+ssh://git@github.com/andymason/trigger-in-view.git"},"author":{"name":"Andrew Mason","email":"andrew@coderonfire.com","url":"https://coderonfire.com"},"bugs":{"url":"https://github.com/andymason/trigger-in-view/issues"},"license":"MIT","readme":"# Trigger in View\n\nUtility helper to trigger callback when HTML elements are in view.\n\n## Install\n\nVia npm...\n\n```bash\nnpm install @andrew-mason/trigger-in-view --save\n```\n\n...or download the JavaScript file from the `dist` folder.\n\n## Usage\n\n```JavaScript\nimport TriggerInView from \"@andrew-mason/trigger-in-view\";\n\nconst triggerInView = new TriggerInView({\n  // Root DOM element (required)\n  rootElement: containerEl,\n\n  // Target elements to trigger on when in view (required)\n  targetElements: childElements,\n\n  // Callback function to trigger when target is in view (required)\n  intersectionCallback: myCallback,\n\n  // Option to trigger each target element only once (optional)\n  triggerOncePerItem: true,\n\n  // Delay between trigger events. Default = 200 (optional)\n  delay: 400\n });\n\n // Manually trigger check of current in-view target elements\n triggerInView.check();\n\n // Remove all event listeners and intersection observers\n trigger.destroy();\n```\n\n## Example\n\n\"Lazy load\" images when they scroll into view by using image path stored in the\nelement's `data` attribute;\n\n```HTML\n<div id=\"my-container\">\n  <img src=\"\" data-src=\"image-1.jpg\" class=\"item\" />\n  <img src=\"\" data-src=\"image-2.jpg\" class=\"item\" />\n  <img src=\"\" data-src=\"image-3.jpg\" class=\"item\" />\n</div>\n\n```\n\n```JavaScript\nimport TriggerInView from \"@andrew-mason/trigger-in-view\";\n\nconst containerElement = document.querySelector(\"#my-container\");\nconst childElements = containerElement.querySelectorAll(\".item\");\nconst myInViewFunction = (entry) => {\n  const { target } = entry;\n  target.setAttribute(\"src\", target.dataset[\"src\"]);\n}\n\nconst triggerInView = new TriggerInView({\n  rootEl: containerElement,\n  targetElements: childElements,\n  intersectionCallback: myInViewFunction,\n  triggerOncePerItem: true,\n});\n\ntriggerInView.check();\n```\n\n## License\n\nMIT\n","readmeFilename":"readme.md"}