{"_id":"watch-size","_rev":"329002","name":"watch-size","description":"Watch the size changes of a DOM element","dist-tags":{"latest":"2.0.0"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"time":{"modified":"2021-06-07T02:45:30.000Z","created":"2018-07-23T13:10:24.058Z","2.0.0":"2018-07-24T13:56:02.917Z","1.0.0":"2018-07-23T13:10:24.058Z"},"users":{},"author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"repository":{"type":"git","url":"git+https://github.com/jonathantneal/watch-size.git"},"versions":{"2.0.0":{"name":"watch-size","version":"2.0.0","description":"Watch the size changes of a DOM element","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/watch-size.git"},"homepage":"https://github.com/jonathantneal/watch-size#readme","bugs":{"url":"https://github.com/jonathantneal/watch-size/issues"},"main":"index.cjs.js","module":"index.es.mjs","files":["index.cjs.js","index.es.mjs"],"scripts":{"prepublishOnly":"npm test","pretest":"rollup -c .rollup.js --silent","test":"echo 'Running tests...'; npm run test:js","test:js":"eslint *.js --cache --ignore-path .gitignore --quiet"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-preset-env":"^1.7.0","eslint":"^5.2.0","eslint-config-dev":"^2.0.0","pre-commit":"^1.2.2","rollup":"^0.63.4","rollup-plugin-babel":"^3.0.7","rollup-plugin-uglify-es":"0.0.1"},"eslintConfig":{"extends":"dev","parser":"babel-eslint"},"keywords":["dark","mode","modes","light","interface","css","media","query","queries"],"gitHead":"6ab9ad413457ec468ea1cbc14672637d047bf418","_id":"watch-size@2.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.7.0","_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"dist":{"shasum":"096ee28d0365bd7ea03d9c8bf1f2f50a73be1474","size":4729,"noattachment":false,"key":"/watch-size/-/watch-size-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/watch-size/download/watch-size-2.0.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/watch-size_2.0.0_1532440562842_0.8289827691517933"},"_hasShrinkwrap":false,"publish_time":1532440562917,"_cnpm_publish_time":1532440562917},"1.0.0":{"name":"watch-size","version":"1.0.0","description":"Watch the size changes of a DOM element","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/watch-size.git"},"homepage":"https://github.com/jonathantneal/watch-size#readme","bugs":{"url":"https://github.com/jonathantneal/watch-size/issues"},"main":"index.iife.js","files":["index.iife.js"],"scripts":{"build:iife":"babel index.js | uglifyjs -c unsafe=true --mangle --output index.iife.js; gzip-size index.iife.js","prepublishOnly":"npm test","test":"echo 'Running tests...'; npm run test:js","test:js":"eslint *.js --cache --ignore-path .gitignore --quiet"},"devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","browserify":"^16.2.2","eslint":"^4.19.1","eslint-config-dev":"^2.0.0","gzip-size-cli":"^2.1.0","pre-commit":"^1.2.2","uglify-js":"^3.4.1"},"eslintConfig":{"extends":"dev","parser":"babel-eslint"},"keywords":["dark","mode","modes","light","interface","css","media","query","queries"],"gitHead":"6e064a187ed2805ccece4c4f237095297d0f07cb","_id":"watch-size@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.7.0","_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"dist":{"shasum":"51c4bfe7ab2201db15bf2315c53957921503b55f","size":4462,"noattachment":false,"key":"/watch-size/-/watch-size-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/watch-size/download/watch-size-1.0.0.tgz"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/watch-size_1.0.0_1532351423979_0.12037887834462979"},"_hasShrinkwrap":false,"publish_time":1532351424058,"_cnpm_publish_time":1532351424058}},"readme":"# Watch Size [<img src=\"https://jonathantneal.github.io/dom-logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\">][Watch Size]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[Watch Size] lets you watch the size changes of a DOM element using the\n`watchSize` function.\n\n## Usage\n\nAdd [Watch Size] to your project:\n\n```bash\nnpm install watch-size\n```\n\nUse `watchSize()` to rewrite your queries:\n\n```js\nimport watchSize from 'watch-size';\n\nconst stop = watchSize(\n  document.querySelector('.box:nth-child(2)')\n  ({ width, height }) => { /* callback */ }\n);\n\n/* use stop() to end listening */\n```\n\n## How does it work?\n\nThe `watchSize` function attaches hidden, over-sized DOM elements to your\ntarget with `scroll` listeners that are triggered whenever the element resizes.\nThis allows the listener to avoid polling, and to truly respond to size changes.\nThis technique can be used in all browsers going back to Internet Explorer 9.\n\nThe entire script is about 400 bytes when minified and gzipped.\n\n[cli-img]: https://img.shields.io/travis/jonathantneal/watch-size.svg\n[cli-url]: https://travis-ci.org/jonathantneal/watch-size\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/watch-size.svg\n[npm-url]: https://www.npmjs.com/package/watch-size\n\n[Watch Size]: https://github.com/jonathantneal/watch-size\n","_attachments":{},"homepage":"https://github.com/jonathantneal/watch-size#readme","bugs":{"url":"https://github.com/jonathantneal/watch-size/issues"},"license":"CC0-1.0"}