{"_id":"@reach/observe-rect","_rev":"403993","name":"@reach/observe-rect","description":"Observe the Rect of a DOM element.","dist-tags":{"latest":"1.2.0"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"time":{"modified":"2021-08-04T04:42:19.000Z","created":"2018-06-02T07:07:44.729Z","1.2.0":"2020-06-22T17:35:54.626Z","1.1.0":"2020-03-13T23:56:17.448Z","1.0.5":"2020-01-10T22:44:00.548Z","1.0.4":"2020-01-08T20:18:43.172Z","1.0.3":"2018-06-12T17:36:02.571Z","1.0.2":"2018-06-03T05:30:44.969Z","1.0.1":"2018-06-03T05:29:49.528Z","1.0.0":"2018-06-02T07:07:44.729Z"},"users":{},"author":{"name":"React Training","email":"hello@reacttraining.com"},"repository":{"type":"git","url":"git+https://github.com/reach/observe-rect","directory":"packages/auto-id"},"versions":{"1.2.0":{"name":"@reach/observe-rect","version":"1.2.0","description":"Observe the Rect of a DOM element.","repository":{"type":"git","url":"git+https://github.com/reach/observe-rect","directory":"packages/auto-id"},"scripts":{"build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","start":"cross-env NODE_ENV=development tsdx watch","test":"cross-env NODE_ENV=test tsdx test","serve":"serve"},"main":"dist/index.js","umd:main":"dist/observe-rect.umd.production.js","module":"dist/observe-rect.esm.js","typings":"dist/index.d.ts","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","dependencies":{},"devDependencies":{"@typescript-eslint/eslint-plugin":"^3.3.0","@typescript-eslint/parser":"^3.3.0","babel-eslint":"^10.1.0","cross-env":"^7.0.2","eslint":"^7.3.0","eslint-plugin-import":"^2.21.2","eslint-plugin-jest":"^23.16.0","husky":"^4.2.5","prettier":"^2.0.5","pretty-quick":"^2.0.1","serve":"^11.3.2","tsdx":"^0.12.1","tslib":"^2.0.0","typescript":"^3.9.5"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"prettier":{"semi":true,"trailingComma":"es5","useTabs":true},"_id":"@reach/observe-rect@1.2.0","dist":{"shasum":"d7a6013b8aafcc64c778a0ccb83355a11204d3b2","size":5716,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.2.0.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.2.0_1592847354529_0.5678017690530539"},"_hasShrinkwrap":false,"publish_time":1592847354626,"_cnpm_publish_time":1592847354626},"1.1.0":{"name":"@reach/observe-rect","version":"1.1.0","description":"Observe the Rect of a DOM element.","repository":{"type":"git","url":"git+https://github.com/reach/observe-rect","directory":"packages/auto-id"},"scripts":{"build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","start":"cross-env NODE_ENV=production tsdx watch","serve":"serve"},"main":"dist/index.js","umd:main":"dist/observe-rect.umd.production.js","module":"dist/observe-rect.esm.js","typings":"dist/index.d.ts","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","dependencies":{},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","babel-loader":"^8.0.6","babel-preset-env":"^1.7.0","cross-env":"^6.0.3","eslint-config-prettier":"^6.9.0","eslint-plugin-jest":"^23.3.0","eslint":"^6.8.0","husky":"^4.0.1","serve":"^11.2.0","ts-loader":"^6.2.1","tsdx":"^0.12.1","tslib":"^1.10.0","typescript":"^3.7.4"},"eslintConfig":{"extends":["eslint:recommended","prettier"],"parserOptions":{"sourceType":"module"},"env":{"es6":true,"browser":true}},"prettier":{"singleQuote":true},"_id":"@reach/observe-rect@1.1.0","dist":{"shasum":"4e967a93852b6004c3895d9ed8d4e5b41895afde","size":5649,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.1.0.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.1.0_1584143777281_0.9271166609886758"},"_hasShrinkwrap":false,"publish_time":1584143777448,"_cnpm_publish_time":1584143777448},"1.0.5":{"name":"@reach/observe-rect","version":"1.0.5","description":"Observe the Rect of a DOM element.","repository":{"type":"git","url":"git+https://github.com/reach/observe-rect","directory":"packages/auto-id"},"scripts":{"build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","start":"cross-env NODE_ENV=production tsdx watch","serve":"serve"},"main":"dist/index.js","umd:main":"dist/observe-rect.umd.production.js","module":"dist/observe-rect.esm.js","typings":"dist/index.d.ts","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","dependencies":{},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","babel-loader":"^8.0.6","babel-preset-env":"^1.7.0","cross-env":"^6.0.3","eslint-config-prettier":"^6.9.0","eslint-plugin-jest":"^23.3.0","eslint":"^6.8.0","husky":"^4.0.1","serve":"^11.2.0","ts-loader":"^6.2.1","tsdx":"^0.12.1","tslib":"^1.10.0","typescript":"^3.7.4"},"eslintConfig":{"extends":["eslint:recommended","prettier"],"parserOptions":{"sourceType":"module"},"env":{"es6":true,"browser":true}},"prettier":{"singleQuote":true},"_id":"@reach/observe-rect@1.0.5","dist":{"shasum":"28bf3c5c35da7fef72cd124af4ac32308d0c3f15","size":5804,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.5.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.5_1578696240310_0.7301933618630816"},"_hasShrinkwrap":false,"publish_time":1578696240548,"_cnpm_publish_time":1578696240548},"1.0.4":{"name":"@reach/observe-rect","version":"1.0.4","description":"Observe the Rect of a DOM element.","repository":{"type":"git","url":"git+https://github.com/reach/observe-rect","directory":"packages/auto-id"},"scripts":{"build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","start":"cross-env NODE_ENV=production tsdx watch","serve":"serve"},"main":"dist/index.js","umd:main":"dist/observe-rect.umd.production.js","module":"dist/observe-rect.esm.js","typings":"dist/index.d.ts","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","dependencies":{},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","babel-loader":"^8.0.6","babel-preset-env":"^1.7.0","cross-env":"^6.0.3","eslint-config-prettier":"^6.9.0","eslint-plugin-jest":"^23.3.0","eslint":"^6.8.0","husky":"^4.0.1","serve":"^11.2.0","ts-loader":"^6.2.1","tsdx":"^0.12.1","tslib":"^1.10.0","typescript":"^3.7.4"},"eslintConfig":{"extends":["eslint:recommended","prettier"],"parserOptions":{"sourceType":"module"},"env":{"es6":true,"browser":true}},"prettier":{"singleQuote":true},"_id":"@reach/observe-rect@1.0.4","dist":{"shasum":"13faf5267918dce15281027f428c2f9bc879a14e","size":5771,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.4.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"_npmUser":{"name":"chancestrickland","email":"chance.strickland@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.4_1578514723028_0.9078872326236631"},"_hasShrinkwrap":false,"publish_time":1578514723172,"_cnpm_publish_time":1578514723172},"1.0.3":{"name":"@reach/observe-rect","version":"1.0.3","description":"Observe the Rect of a DOM element.","scripts":{"build":"microbundle","start":"microbundle watch"},"files":["src","dist","README.md"],"main":"dist/index.js","umd:main":"dist/index.umd.js","module":"dist/index.m.js","source":"src/index.js","repository":{"type":"git","url":"git+https://github.com/reach/rect-observer.git"},"author":{"name":"Ryan Florence","email":"@ryanflorence"},"license":"MIT","dependencies":{},"devDependencies":{"babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-jest":"^21.17.0","microbundle":"^0.4.4","serve":"^7.2.0"},"prettier":{},"gitHead":"1618bbbb26542b0aeeaa926d2181770fcb897640","bugs":{"url":"https://github.com/reach/rect-observer/issues"},"homepage":"https://github.com/reach/rect-observer#readme","_id":"@reach/observe-rect@1.0.3","_shasum":"2ea3dcc369ab22bd9f050a92ea319321356a61e8","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.5","_npmUser":{"name":"ryanflorence","email":"rpflorence@gmail.com"},"dist":{"shasum":"2ea3dcc369ab22bd9f050a92ea319321356a61e8","size":2193,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.3.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.3_1528824962504_0.6313140191866111"},"_hasShrinkwrap":false,"publish_time":1528824962571,"_cnpm_publish_time":1528824962571},"1.0.2":{"name":"@reach/observe-rect","version":"1.0.2","description":"Observe the Rect of a DOM element.","scripts":{"build":"microbundle","start":"microbundle watch"},"files":["src","dist","README.md"],"main":"dist/index.js","umd:main":"dist/index.umd.js","module":"dist/index.m.js","source":"src/index.js","repository":{"type":"git","url":"git+https://github.com/reach/rect-observer.git"},"author":{"name":"Ryan Florence","email":"@ryanflorence"},"license":"MIT","dependencies":{},"devDependencies":{"babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-jest":"^21.17.0","microbundle":"^0.4.4","serve":"^7.2.0"},"prettier":{},"gitHead":"976527ee6a343b7bd719dca8c2fe70aedc68211d","bugs":{"url":"https://github.com/reach/rect-observer/issues"},"homepage":"https://github.com/reach/rect-observer#readme","_id":"@reach/observe-rect@1.0.2","_npmVersion":"6.1.0","_nodeVersion":"8.4.0","_npmUser":{"name":"ryanflorence","email":"rpflorence@gmail.com"},"dist":{"shasum":"cf2725caf47572fd42d610a88a28d54a1a4fcd01","size":3232,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.2.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.2_1528003844907_0.052130915906358544"},"_hasShrinkwrap":false,"publish_time":1528003844969,"_cnpm_publish_time":1528003844969},"1.0.1":{"name":"@reach/observe-rect","version":"1.0.1","description":"Observe the Rect of a DOM element.","scripts":{"build":"microbundle","start":"microbundle watch"},"files":["src","dist","README.md"],"main":"dist/index.js","umd:main":"dist/index.umd.js","module":"dist/index.m.js","source":"src/index.js","repository":{"type":"git","url":"git+https://github.com/reach/rect-observer.git"},"author":{"name":"Ryan Florence","email":"@ryanflorence"},"license":"MIT","dependencies":{},"devDependencies":{"babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-jest":"^21.17.0","microbundle":"^0.4.4","serve":"^7.2.0"},"prettier":{},"gitHead":"46760f8fb04f8759877d6658fd79caf41f7b8e08","bugs":{"url":"https://github.com/reach/rect-observer/issues"},"homepage":"https://github.com/reach/rect-observer#readme","_id":"@reach/observe-rect@1.0.1","_npmVersion":"6.1.0","_nodeVersion":"8.4.0","_npmUser":{"name":"ryanflorence","email":"rpflorence@gmail.com"},"dist":{"shasum":"d2beb257ec908c833b5bb6bc79daf5f56021ec1d","size":3865,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.1.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.1_1528003789448_0.29134916634878993"},"_hasShrinkwrap":false,"publish_time":1528003789528,"_cnpm_publish_time":1528003789528},"1.0.0":{"name":"@reach/observe-rect","version":"1.0.0","description":"Observe the Rect of a DOM element.","scripts":{"build":"microbundle","start":"microbundle watch"},"files":["src","dist","README.md"],"main":"dist/index.js","umd:main":"dist/index.umd.js","module":"dist/index.m.js","source":"src/index.js","repository":{"type":"git","url":"git+https://github.com/reach/rect-observer.git"},"author":{"name":"Ryan Florence","email":"@ryanflorence"},"license":"MIT","dependencies":{},"devDependencies":{"babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-jest":"^21.17.0","microbundle":"^0.4.4","serve":"^7.2.0"},"prettier":{},"gitHead":"b8e9f5c77b97278500af4c4df21b987a632791e4","bugs":{"url":"https://github.com/reach/rect-observer/issues"},"homepage":"https://github.com/reach/rect-observer#readme","_id":"@reach/observe-rect@1.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.4.0","_npmUser":{"name":"ryanflorence","email":"rpflorence@gmail.com"},"dist":{"shasum":"76679f7b5da7071b18a76633a4af2662cfcbb605","size":2212,"noattachment":false,"key":"/@reach/observe-rect/-/@reach/observe-rect-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@reach/observe-rect/download/@reach/observe-rect-1.0.0.tgz"},"maintainers":[{"name":"mjackson","email":""},{"name":"ryanflorence","email":"rpflorence@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/observe-rect_1.0.0_1527923264660_0.5289199651779104"},"_hasShrinkwrap":false,"publish_time":1527923264729,"_cnpm_publish_time":1527923264729}},"readme":"
\n\n## Installation\n\n```\nnpm install @reach/observe-rect\n# or\nyarn add @reach/observe-rect\n```\n\n## Usage\n\n```js\nimport observeRect from \"@reach/observe-rect\";\n\nlet node = document.getElementById(\"some-node\");\n\nlet rectObserver = observeRect(node, rect => {\n console.log(\"left\", rect.left);\n console.log(\"top\", rect.top);\n console.log(\"height\", rect.height);\n console.log(\"width\", rect.width);\n});\n\n// start observing\nrectObserver.observe();\n\n// stop observing\nrectObserver.unobserve();\n```\n\n## About\n\nA lot of things can change the position or size of an element, like scrolling, content reflows and user input. This utility observes and notifies you when your element's rect changes.\n\n## Legal\n\nMIT License\nCopyright (c) 2018-present, Ryan Florence\n","_attachments":{},"license":"MIT"}
![\"Reach](\"./logo.png\"){kind=logo}
\n \n![](\"https://img.shields.io/npm/v/@reach/observe-rect.svg?style=flat-square\")
\n ![](\"https://img.shields.io/npm/dm/@reach/observe-rect.svg?style=flat-square\")
\n![\"Demo\"/](\"./demo.gif\")
\n