{"_id":"simple-element-resize-detector","_rev":"3146942","name":"simple-element-resize-detector","description":"Observes resizing of an element using a hidden iframe.","dist-tags":{"latest":"1.3.0"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"time":{"modified":"2023-11-27T07:18:46.000Z","created":"2017-01-04T05:13:41.347Z","1.3.0":"2019-06-13T13:03:10.192Z","1.2.0":"2018-08-31T14:11:56.875Z","1.1.1":"2018-08-31T14:09:45.829Z","1.1.0":"2017-01-04T17:27:48.503Z","1.0.1":"2017-01-04T05:14:36.531Z","1.0.0":"2017-01-04T05:13:41.347Z"},"users":{"atomix":true},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"versions":{"1.3.0":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.3.0","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","umd:main":"dist/simple-element-resize-detector.js","module":"dist/simple-element-resize-detector.module.js","source":"index.js","scripts":{"build":"microbundle -f es,umd","test":"eslint src test","prepublish":"npm run -s build && npm t","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"eslintConfig":{"extends":"developit"},"keywords":["element resize","resize observer","ResizeObserver","element size"],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"eslint":"^4.19.1","eslint-config-developit":"^1.1.1","microbundle":"^0.11.0"},"gitHead":"dc7f3f1138a7a61a6786d4d3664661bfb1ba7a32","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.3.0","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"b21bc1fd7f1d2e071a92d20a713f2968ac7d6b03","size":2138,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.3.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.3.0.tgz"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"_npmUser":{"name":"developit","email":"jason@developit.ca"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/simple-element-resize-detector_1.3.0_1560430990073_0.9840862053514989"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T03:05:33.743Z","publish_time":1560430990192,"_cnpm_publish_time":1560430990192},"1.2.0":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.2.0","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","umd:main":"dist/simple-element-resize-detector.js","module":"dist/simple-element-resize-detector.mjs","source":"index.js","scripts":{"build":"microbundle -f es,umd","test":"eslint src test","prepublish":"npm run -s build && npm t","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"eslintConfig":{"extends":"developit"},"keywords":["element resize","resize observer","ResizeObserver","element size"],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"eslint":"^4.19.1","eslint-config-developit":"^1.1.1","microbundle":"^0.6.0"},"gitHead":"7acd4fd3875c9c6738424f3ece3c436e3b2e815a","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.2.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"developit","email":"jason@developit.ca"},"dist":{"shasum":"d88a6e643b23514b9608008595a7b086de224c57","size":2035,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.2.0.tgz"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/simple-element-resize-detector_1.2.0_1535724716737_0.6363020778919268"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T03:05:33.443Z","publish_time":1535724716875,"_cnpm_publish_time":1535724716875},"1.1.1":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.1.1","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","jsnext:main":"index.js","scripts":{"build":"npm-run-all transpile minify size","transpile":"rollup -c rollup.config.js","minify":"uglifyjs $npm_package_main -cm -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map","size":"echo \"gzip size: $(gzip-size $npm_package_main | pretty-bytes)\"","test":"eslint src test","prepublish":"npm-run-all build test","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"keywords":[],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"babel-core":"^6.6.4","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.9.0","babel-preset-stage-0":"^6.5.0","eslint":"^3.1.0","gzip-size-cli":"^1.0.0","mkdirp":"^0.5.1","npm-run-all":"^2.3.0","pretty-bytes-cli":"^1.0.0","rollup":"^0.36.3","rollup-plugin-babel":"^2.4.0","rollup-plugin-es3":"^1.0.3","uglify-js":"^2.6.2"},"gitHead":"3bd4e3acf9963c8f7a025acaea0eab42aa3cf898","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.1.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"developit","email":"jason@developit.ca"},"dist":{"shasum":"d687c26237c200792b33fcaffaad299edfe3a968","size":2462,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.1.1.tgz"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/simple-element-resize-detector_1.1.1_1535724585698_0.8513669063255125"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-24T03:05:32.579Z","publish_time":1535724585829,"_cnpm_publish_time":1535724585829},"1.1.0":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.1.0","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","jsnext:main":"index.js","scripts":{"build":"npm-run-all transpile minify size","transpile":"rollup -c rollup.config.js","minify":"uglifyjs $npm_package_main -cm -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map","size":"echo \"gzip size: $(gzip-size $npm_package_main | pretty-bytes)\"","test":"eslint src test","prepublish":"npm-run-all build test","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"files":["index.js","dist"],"keywords":[],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"babel-core":"^6.6.4","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.9.0","babel-preset-stage-0":"^6.5.0","eslint":"^3.1.0","gzip-size-cli":"^1.0.0","mkdirp":"^0.5.1","npm-run-all":"^2.3.0","pretty-bytes-cli":"^1.0.0","rollup":"^0.36.3","rollup-plugin-babel":"^2.4.0","rollup-plugin-es3":"^1.0.3","uglify-js":"^2.6.2"},"gitHead":"0be822bbb61a66865e797869ebb7354e35883541","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.1.0","_shasum":"40cf216b6c5dc763304fb999916b8096ba7a8017","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.1","_npmUser":{"name":"developit","email":"jason@developit.ca"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"dist":{"shasum":"40cf216b6c5dc763304fb999916b8096ba7a8017","size":2799,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.1.0.tgz"},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/simple-element-resize-detector-1.1.0.tgz_1483550866306_0.820986459730193"},"directories":{},"_cnpmcore_publish_time":"2021-12-24T03:05:31.639Z","publish_time":1483550868503,"_cnpm_publish_time":1483550868503},"1.0.1":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.0.1","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","jsnext:main":"index.js","scripts":{"build":"npm-run-all transpile minify size","transpile":"rollup -c rollup.config.js","minify":"uglifyjs $npm_package_main -cm -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map","size":"echo \"gzip size: $(gzip-size $npm_package_main | pretty-bytes)\"","test":"eslint src test","prepublish":"npm-run-all build test","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"files":["index.js","dist"],"keywords":[],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"babel-core":"^6.6.4","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.9.0","babel-preset-stage-0":"^6.5.0","eslint":"^3.1.0","gzip-size-cli":"^1.0.0","mkdirp":"^0.5.1","npm-run-all":"^2.3.0","pretty-bytes-cli":"^1.0.0","rollup":"^0.36.3","rollup-plugin-babel":"^2.4.0","rollup-plugin-es3":"^1.0.3","uglify-js":"^2.6.2"},"gitHead":"edb22f56e7607afc5d11dbc9035c8e36b95e70c3","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.0.1","_shasum":"3378eaa8aa231f20e7f37f307228f3fe694d24ef","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.1","_npmUser":{"name":"developit","email":"jason@developit.ca"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"dist":{"shasum":"3378eaa8aa231f20e7f37f307228f3fe694d24ef","size":2517,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.0.1.tgz"},"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/simple-element-resize-detector-1.0.1.tgz_1483506875821_0.2072824260685593"},"directories":{},"_cnpmcore_publish_time":"2021-12-24T03:05:30.565Z","publish_time":1483506876531,"_cnpm_publish_time":1483506876531},"1.0.0":{"name":"simple-element-resize-detector","amdName":"simpleElementResizeDetector","version":"1.0.0","description":"Observes resizing of an element using a hidden iframe.","main":"dist/simple-element-resize-detector.js","jsnext:main":"index.js","scripts":{"build":"npm-run-all transpile minify size","transpile":"rollup -c rollup.config.js","minify":"uglifyjs $npm_package_main -cm -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map","size":"echo \"gzip size: $(gzip-size $npm_package_main | pretty-bytes)\"","test":"eslint src test","prepublish":"npm-run-all build test","release":"npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"},"files":["index.js","dist"],"keywords":[],"repository":{"type":"git","url":"git+https://github.com/developit/simple-element-resize-detector.git"},"author":{"name":"Jason Miller","email":"jason@developit.ca"},"license":"MIT","devDependencies":{"babel-core":"^6.6.4","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.9.0","babel-preset-stage-0":"^6.5.0","eslint":"^3.1.0","gzip-size-cli":"^1.0.0","mkdirp":"^0.5.1","npm-run-all":"^2.3.0","pretty-bytes-cli":"^1.0.0","rollup":"^0.36.3","rollup-plugin-babel":"^2.4.0","rollup-plugin-es3":"^1.0.3","uglify-js":"^2.6.2"},"gitHead":"20a0ef96acc3b9d2a32ca32923a3be28b56589b5","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","_id":"simple-element-resize-detector@1.0.0","_shasum":"906168d99928470466762e2d8584be5357228f84","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.1","_npmUser":{"name":"developit","email":"jason@developit.ca"},"maintainers":[{"name":"developit","email":"jason@developit.ca"},{"name":"nekr","email":""}],"dist":{"shasum":"906168d99928470466762e2d8584be5357228f84","size":2514,"noattachment":false,"key":"/simple-element-resize-detector/-/simple-element-resize-detector-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/simple-element-resize-detector/download/simple-element-resize-detector-1.0.0.tgz"},"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/simple-element-resize-detector-1.0.0.tgz_1483506820707_0.6189356006216258"},"directories":{},"_cnpmcore_publish_time":"2021-12-24T03:05:29.686Z","publish_time":1483506821347,"_cnpm_publish_time":1483506821347}},"readme":"# simple-element-resize-detector [![NPM](https://img.shields.io/npm/v/simple-element-resize-detector.svg?style=flat)](https://www.npmjs.org/package/simple-element-resize-detector)\n\n\nObserves resizing of an element using a hidden iframe.\n\n[**JSFiddle Demo**](https://jsfiddle.net/developit/62Lgh3wz/)\n\n## Installation\n\n```sh\nnpm i -S simple-element-resize-detector\n```\n\n\n## Usage\n\n```js\nimport observeResize from 'simple-element-resize-detector';\n\n// any DOM element that can have children\nlet element = document.createElement('div');\n\n// listen for resize\nobserveResize(element, () => {\n\tconsole.log('new size: ', {\n\t\twidth: element.clientWidth,\n\t\theight: element.clientHeight\n\t});\n});\n```\n\nTo stop observing resize events, simply remove the returned detector frame:\n\n```js\nlet detector = observeResize(el, () => {});\n\ndetector.remove();\n\n// or, for better browser compatibility:\n// detector.parentNode.removeChild(detector)\n```\n\n## Notes\n\n* `element` passed to `observeResize()` must have `position: relative` style to be correctly observed, otherwise nearest relative ancestor will be observed instead.\n* This library uses `<iframe>`s to detect when an element resizes. `<iframe>`s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.\n\n## License\n\nMIT\n","_attachments":{},"homepage":"https://github.com/developit/simple-element-resize-detector#readme","bugs":{"url":"https://github.com/developit/simple-element-resize-detector/issues"},"license":"MIT"}