{"_id":"@rehooks/component-size","_rev":"5-853ff719fb4217dd5e5a55c46cd62b45","name":"@rehooks/component-size","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@rehooks/component-size","version":"1.0.0","description":"React hook for component-size","main":"index.js","repository":{"type":"git","url":"git+https://github.com/rehooks/component-size.git"},"author":{"name":"Fouad Matin","email":"open@m@fouad.org"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","hooks","component-size"],"scripts":{"test":"ava test.js","example":"parcel example.html"},"peerDependencies":{"react":"^16.7.0-alpha.0"},"devDependencies":{"ava":"^0.25.0","browser-env":"^3.2.5","parcel":"^1.10.3","raf":"^3.4.0","react":"^16.7.0-alpha.0","react-dom":"^16.7.0-alpha.0","react-test-renderer":"^16.7.0-alpha.0"},"ava":{"require":["./test-setup.js"]},"gitHead":"ee7c2e16b8780c93fac42135204d0ad2fbe47553","bugs":{"url":"https://github.com/rehooks/component-size/issues"},"homepage":"https://github.com/rehooks/component-size#readme","_id":"@rehooks/component-size@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"fouad","email":"fm@fouad.co"},"dist":{"integrity":"sha512-vlzbFdQx1cyAojhWZIVF/1tIdEbFEPRZ9bDlyp86aUYgBBJBf1Dh0RHQVR1GcXN3VbDQ0xtfrmsQiav96k6byA==","shasum":"634341fec3e15b24901a59fe470f6e2e23ba8304","tarball":"https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.0.tgz","fileCount":6,"unpackedSize":3668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0iXvCRA9TVsSAnZWagAAqfcP/2wWAzWhjpeNXHpvp35q\nNjb3PrTTDTBcCHNq//FaDgIVYDm4TdH2bbemNEozvppjxy83LBPY63nmgMsd\nKwBh2HtuHuGeBiU238lJwAGHuMEh7SxJVWdPJhAeLYvaazailKaasNJ4BrKB\n5Rq7dqn9LVAPwjcANnH3byrYNWtYXAsEzx5+SPkUoy/GL0TahsuZ+LsI51QY\nnW+llTd8wyu55AgpJ5jK0JX7PlPxXZ/tnwhNOgUBZbpQS5ts9sxwwAOaZidE\nP1zmF+eEricvNxSIj2u3jSYVIZHdnnBzIwbOXf84aFjpEuHDkYR9HasxAb5M\nqLeOvyH27GjYmiZh4k4gnp+0p+LhV6uIqsj+AhAEYJ6fgdDenvB60mWyliB2\nCa5VzgTwdXGu6KwwDFl3rpZpoQysM6vLqv+cZa/179kHoBA2uMUKmn7DGOx+\nx6IYcR4bdQN49GCRRisL13Fm2DJggwVuU2pWfFi82sdTvNlqp9V1W0pdWJwa\nWAjYB6L54Z5LPOtlTGt8FOu/Vbkk5aov4llmQVJuQcPmi0vVAwcy+nHu1lPL\neEf/5ii9yZBye+qrivQue5PbORwKZx4uYQVc0H8QEADiqrc+LbCM/HypwOE9\nGArQF2YaJxA+OdMX7bCjXNMbtab92DDGhoZvRcWmtXKtYBMmJ5njf+7EpOuZ\nVvoX\r\n=/21S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwH/4qscl55amA6Zk1g9PthkRGMkSM6PYyI0DhitfmVAiB2mkmlzwT3cpAwxK3N6H80tDmO+BzVHua3WKAVcXKsyg=="}]},"maintainers":[{"name":"fouad","email":"fm@fouad.co"},{"name":"jackhanford","email":"jackhanford@gmail.com"},{"name":"mathdroid","email":"muhammad.mustadi@gmail.com"},{"name":"thejameskyle","email":"me@thejameskyle.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/component-size_1.0.0_1540498925665_0.08689538590222301"},"_hasShrinkwrap":false},"1.0.1":{"name":"@rehooks/component-size","version":"1.0.1","description":"React hook for component-size","main":"index.js","repository":{"type":"git","url":"git+https://github.com/rehooks/component-size.git"},"author":{"name":"Fouad Matin","email":"open@m@fouad.org"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","hooks","component-size"],"scripts":{"test":"ava test.js","example":"parcel example.html"},"peerDependencies":{"react":"^16.7.0-alpha.0"},"devDependencies":{"ava":"^0.25.0","browser-env":"^3.2.5","parcel":"^1.10.3","raf":"^3.4.0","react":"^16.7.0-alpha.0","react-dom":"^16.7.0-alpha.0","react-test-renderer":"^16.7.0-alpha.0"},"ava":{"require":["./test-setup.js"]},"gitHead":"f4a3dc913af8cb02edc506b8835ac223b3bc6e85","bugs":{"url":"https://github.com/rehooks/component-size/issues"},"homepage":"https://github.com/rehooks/component-size#readme","_id":"@rehooks/component-size@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"fouad","email":"fm@fouad.co"},"dist":{"integrity":"sha512-yzXzxqC8pkwoO7tjcrf3fW9RRG9eCNjS2fNQpfcQ5AyxNs8OsMZ+D2CtNg02bPOQaoHq1888aEJBMrjBznlW5Q==","shasum":"a1dc2992d367a4ec17429d92c542f8a19fd693e2","tarball":"https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.1.tgz","fileCount":6,"unpackedSize":5283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2gLjCRA9TVsSAnZWagAAe9oQAIPIjchVB8klZ8wtShBi\n5PcPn6HzX69uLAc7O1UWTqOYoQxqdqmPDrWuDG9zRRd7Lqh11RMDHiUvlM4R\ncsofxAJtj3mw4+muGbmZ/5Rhr4risyAe0fRNc7Ky20sWxtXYfHp0h3c7Yl1l\n0bBMJGK60Hf+R5MKMXXzeAMq1sLUfdGa6l7jEUBpRrhJI/83Zr4T395Kl4PA\n0M+1pgkhOyLpH7aLQ7WV5WfbCwSxUg0m5s2CiGiwwJlLyzRbgzKrop6lGTwO\n/jGn+n8kKHadzv7SPpg4+IhkUQbRps2f59ktfZrdXzrE6fFyHp0EgIy6nZNe\nmsc+AYuyPo1Tyw3MO4Frv7Pha32ZzQBXjYwPQTCOglpBpDAnIGN88IqhwF9k\nrYeh5KwLmhQuAgEQY+1OIhJ6DS72vHNd4ySzqe+zPdMluvgUJMLd2i1/0y3L\nzdNNQLW6TbsYSeBsQgEmyxdoHHto8DBpcLfKM1Pe4q4xpcfpn5R31XMWJ3yE\npYyMmPsK8XuFpCvV9/6Q94RAEX01XKJuQQoIdsXs4vydJE0bXoJT+yY75LD1\nPuiPqIVh9+7l+T1mGzWimWrxT+fcHpLsyCW7phQgrWR5sBAY/XLEGwqpMZeG\nsYsk1s2L8ot9IfGomjqVAYzrBaDFqCApfZ6fMBLMjIdFqNxUZOrp1YAk4Ale\n6q1p\r\n=8CXX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXdJj4G9U5dQHFtrjdkY+1svqRXtN9hEYlkcuQNpjOFAiBQHWXbeHXR9S3ysVzzW8dLHHqFlnaYYlXM+Hgzap7TQQ=="}]},"maintainers":[{"name":"fouad","email":"fm@fouad.co"},{"name":"jackhanford","email":"jackhanford@gmail.com"},{"name":"mathdroid","email":"muhammad.mustadi@gmail.com"},{"name":"thejameskyle","email":"me@thejameskyle.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/component-size_1.0.1_1541014242211_0.8581414675304377"},"_hasShrinkwrap":false},"1.0.2":{"name":"@rehooks/component-size","version":"1.0.2","description":"React hook for component-size","main":"index.js","repository":{"type":"git","url":"git+https://github.com/rehooks/component-size.git"},"author":{"name":"Fouad Matin","email":"open@m@fouad.org"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","hooks","component-size"],"scripts":{"test":"ava test.js","example":"parcel example.html"},"peerDependencies":{"react":"^16.7.0-alpha.0"},"devDependencies":{"@types/react":"^16.4.18","ava":"^0.25.0","browser-env":"^3.2.5","parcel":"^1.10.3","raf":"^3.4.0","react":"^16.7.0-alpha.0","react-dom":"^16.7.0-alpha.0","react-test-renderer":"^16.7.0-alpha.0"},"ava":{"require":["./test-setup.js"]},"gitHead":"c0abcb9702f173cd5d52710af8604b29f2fbac17","bugs":{"url":"https://github.com/rehooks/component-size/issues"},"homepage":"https://github.com/rehooks/component-size#readme","_id":"@rehooks/component-size@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"fouad","email":"fm@fouad.co"},"dist":{"integrity":"sha512-bjuKCFEIr1eDNvK/ET2SWl/xCKloywupJyfKQqZ6GaEKhnlCI2YV10rv9wTNrbSnzoHraktig9YYC0e69RowLA==","shasum":"b93d5f39bc9f47a6c0feb39690ae07156bc65863","tarball":"https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.2.tgz","fileCount":6,"unpackedSize":5603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/dJvCRA9TVsSAnZWagAAmnsP/1jHA2S0J4mmB98BjoQX\n5VN4/d7XeVi0HelR4/4eAtv/l3SDWCsJlKO7kV2w8t28gKAUuq+u6mHlTyJE\nHbxL1inOX+tynAB23JjtHI1Sb2KKCVvKA9qra32qxd4hMwXZhps/i4NTAzQc\n2CgIaO9SgCdf0q97XD8PtiVnzaHNHd82agjk5mZY9/uBe/36Ap7Dln994BzX\nYwUZkiCsYH8hUHTeZx3iv2Usb+tXGLtJUHz9lVp5etHyrhPf8SVA29AUT5Nf\nZIF5XnAKCrgBSFNCN/LJqvF+MvsI032ehFitH7zs2c0+x/35Dh38jzEJMafZ\nwtr0N/iXXRMzS6qal0DDmTNMbFjILhBVfR4HxQf67qNSSfxEzyWqsMtmOR9f\n7vZZ2Rp8mdtHX15tLiyU1Ency+ZKSwR/FyL1jWSYjeiVAdV+ZYertY4K3dk1\nMsSwS/eI+13E4xCKpNEhp0aTX36ua05gI/1+2Euo3NcaOVJbv79c6ZVBbpTg\n3h8MHVgls1E271HKZVXkMgYW0pXbKNMmqCcAAZWzTCBHgpApmbViajxvfrua\n3dGeYn/Dd4APN+jvRoh2w0fVBYpy1BiMfOkoEDm9ZoQDMlH0wkiORppIGx7N\nT8+Lut2zktsQjxqxpqMZfqW16CaW+lTlDt7GmjNIL59RQP6fM+zXZZI3Q7Hb\nWXXq\r\n=c4BY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD02dsDuvWdkhHKbfSd3Y1l0mmr7GDPPy6Gve0z97XbDwIgOkiwTSOJ4yk6Oex7rEXb4nWjpPewqjerCwuzDjwXrwU="}]},"maintainers":[{"email":"fm@fouad.co","name":"fouad"},{"email":"jackhanford@gmail.com","name":"hanford"},{"email":"amit.fash@gmail.com","name":"iamsolankiamit"},{"email":"jakemoxey@gmail.com","name":"jmoxey"},{"email":"muhammad.mustadi@gmail.com","name":"mathdroid"},{"email":"me@thejameskyle.com","name":"thejameskyle"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/component-size_1.0.2_1543361134554_0.10803117163840192"},"_hasShrinkwrap":false},"1.0.3":{"name":"@rehooks/component-size","version":"1.0.3","description":"React hook for component-size","main":"index.js","repository":{"type":"git","url":"https://github.com/rehooks/component-size"},"author":{"name":"Fouad Matin","email":"m@fouad.org"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","hooks","component-size"],"scripts":{"test":"ava test.js","example":"parcel example.html"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@types/react":"16.4.18","ava":"0.25.0","browser-env":"3.2.5","parcel":"^1.12.3","raf":"3.4.0","react":"16.8.1","react-dom":"16.8.1","react-test-renderer":"16.8.1"},"ava":{"require":["./test-setup.js"]},"licenseText":"Copyright (c) 2018-present Fouad Matin \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@rehooks/component-size@1.0.3","dist":{"shasum":"823eabeb42084893d46d43e3a9d1d0e34252b3cb","integrity":"sha512-pnYld+8SSF2vXwdLOqBGUyOrv/SjzwLjIUcs/4c1JJgR0q4E9eBtBfuZMD6zUD51fvSehSsbnlQMzotSmPTXPg==","tarball":"https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.3.tgz","fileCount":7,"unpackedSize":5715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMPFVCRA9TVsSAnZWagAAkfIP/A01OQh7LICSlQtwCwdn\nrExeFtBpC+v8NplB22Kt1wgs2RA5+1pBKeJZhZBz3p3DrNjnVzUT78JcSQ4K\nXVXFkmzLVS59GyywNnx/PCpdmhjIW0k88uoY+Gdz9nB4DIoXYB6RKwyvGB64\nyA7nLLS4Fc2VtBdqlaeZAuCOlZrPNa8ggLnNB0JiAoA+/2RhuRQUvRGBGp5l\nLhXj/SLEVuNV0myLkwQLrBI8BPJ4I0W/MJtjQ/TnaZ4ghd5QqAp+c8gdqlhL\nX/3j4cb6VqIZ03XJGcIZ5gaAxa2Tk0f7zOCv5i4F2VtFVuSuNtHmC6SmMrnB\nR6x7Rh/IcgqIug0fX+4YCNj9AaOzihzUebBs6IsOrcm03wjXF22SDiEF+PBo\nByK9nSwecEcHeUY07j5v0VWrroXtki3IxxSlqkrcn8V9xMwrYdeaetbKxqNK\n124UGt7opGLlPkzQONV3BybV2Fsrzp47sntcu436UxmnkUSwIq7d305Lmvxo\naHuh5olnBqsQvIALvHHam02jKTiPHZsxaI9+HAXuZ/ryuRfFDHtuNlwru9F3\njbt6MHmfw1EvJOj+9mYGeXByJU4uLge5nuJYEOTVvOJQQY37bvLRFZzjimnD\nseb9q5vZJC+QYccH3xJrrewNkZ0aEU5rCyNGMGtuGtvVcDq8yq7VHml1oGoB\nQ7vm\r\n=T5R4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo/YMeszjldw7bkG22+mGt+YXDwddrKdfsqoNQt8JpuAiEA/aK2LOvmkD9zKS0L7Zr0a94mMsPO8HhIET+TcIB16Gc="}]},"maintainers":[{"email":"fm@fouad.co","name":"fouad"},{"email":"jackhanford@gmail.com","name":"hanford"},{"email":"amit.fash@gmail.com","name":"iamsolankiamit"},{"email":"jakemoxey@gmail.com","name":"jmoxey"},{"email":"muhammad.mustadi@gmail.com","name":"mathdroid"},{"email":"me@thejameskyle.com","name":"thejameskyle"}],"_npmUser":{"name":"fouad","email":"fm@fouad.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/component-size_1.0.3_1563488596102_0.18967390481363755"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-25T20:22:05.505Z","1.0.0":"2018-10-25T20:22:05.821Z","modified":"2022-04-06T19:10:06.230Z","1.0.1":"2018-10-31T19:30:42.363Z","1.0.2":"2018-11-27T23:25:34.795Z","1.0.3":"2019-07-18T22:23:16.192Z"},"maintainers":[{"email":"fm@fouad.co","name":"fouad"},{"email":"jackhanford@gmail.com","name":"hanford"},{"email":"amit.fash@gmail.com","name":"iamsolankiamit"},{"email":"jakemoxey@gmail.com","name":"jmoxey"},{"email":"muhammad.mustadi@gmail.com","name":"mathdroid"},{"email":"me@thejameskyle.com","name":"thejameskyle"}],"description":"React hook for component-size","keywords":["react","hooks","component-size"],"repository":{"type":"git","url":"https://github.com/rehooks/component-size"},"author":{"name":"Fouad Matin","email":"m@fouad.org"},"license":"MIT","readme":"# `@rehooks/component-size`\n\n> React hook for determining the size of a component\n\n> **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html)\n> which is subject to change until React 16.7 final.\n>\n> You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0`\n\n## Install\n\n```sh\nyarn add @rehooks/component-size\n```\n\n## Usage\n\n```js\nimport { useRef } from 'react'\nimport useComponentSize from '@rehooks/component-size'\n\nfunction MyComponent() {\n let ref = useRef(null)\n let size = useComponentSize(ref)\n // size == { width: 100, height: 200 }\n let { width, height } = size\n let imgUrl = `https://via.placeholder.com/${width}x${height}`\n\n return (\n
\n \n
\n )\n}\n```\n\n## ResizeObserver\n\n[Resize Observer](https://developers.google.com/web/updates/2016/10/resizeobserver)\nis the API is used to determine if an element is resized. Browser support is pretty good in Chrome, but is still missing support in other major browsers.\n\n> [Can i use ResizeObserver?](https://caniuse.com/#feat=resizeobserver)\n\n### Polyfill\n\nYou can import the\n[polyfill](https://github.com/que-etc/resize-observer-polyfill) directly from here\n\n```sh\nyarn add resize-observer-polyfill\n```\n\nThen import it in your app:\n\n```js\nimport 'resize-observer-polyfill'\n```\n\nIf you are using Webpack (or similar) you could use [dynamic\nimports](https://webpack.js.org/api/module-methods/#import-), to load the\nPolyfill only if needed. A basic implementation could look something like this:\n\n```js\nloadPolyfills()\n .then(() => /* Render React application now that your Polyfills are ready */)\n\n/**\n* Do feature detection, to figure out which polyfills needs to be imported.\n**/\nfunction loadPolyfills() {\n const polyfills = []\n\n if (!supportsResizeObserver()) {\n polyfills.push(import('resize-observer-polyfill'))\n }\n\n return Promise.all(polyfills)\n}\n\nfunction supportsResizeObserver() {\n return (\n 'ResizeObserver' in global &&\n 'ResizeObserverEntry' in global &&\n 'contentRect' in ResizeObserverEntry.prototype\n )\n}\n```\n","readmeFilename":"README.md"}