{"_id":"@_use/resizeobserver","_rev":"1-5904a7150a513c8fa572e0b37f413204","name":"@_use/resizeobserver","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@_use/resizeobserver","version":"0.1.0","description":"A Custom React Hook to observer the component resize.","repository":{"type":"git","url":"git+https://github.com/usejs/useResizeObserver.git"},"author":{"name":"André Malveira","email":"andremalveira.dev@gmail.com"},"private":false,"publishConfig":{"access":"public"},"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"keywords":["useResizeObserver","useresizeobserver","use-resize-observer","custom-hooks","react-custom-hooks","react-hooks"],"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"module":"dist/resizeobserver.esm.js","size-limit":[{"path":"dist/resizeobserver.cjs.production.min.js","limit":"10 KB"},{"path":"dist/resizeobserver.esm.js","limit":"10 KB"}],"devDependencies":{"@types/resize-observer-browser":"^0.1.7","@size-limit/preset-small-lib":"^7.0.8","@types/react":"^17.0.43","husky":"^7.0.4","size-limit":"^7.0.8","tsdx":"^0.14.1","tslib":"^2.3.1","typescript":"^4.6.3"},"peerDependencies":{"react":"^17.0.2"},"dependencies":{},"gitHead":"0d0e157e3a81f5c2c03fb2aef5db45521e1cec91","bugs":{"url":"https://github.com/usejs/useResizeObserver/issues"},"homepage":"https://github.com/usejs/useResizeObserver#readme","_id":"@_use/resizeobserver@0.1.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Ee4dROq3pNpnOk0H2aF9khWhG+ZdswFI1Mz+DJBinCRc/OUG/EMeX57Zojz7SzpR22NpiSZYzC2+OA0UWcGS4A==","shasum":"ba1be740932e89a189303dba9d2a1383bbb801c6","tarball":"https://registry.npmjs.org/@_use/resizeobserver/-/resizeobserver-0.1.0.tgz","fileCount":14,"unpackedSize":18834,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf5yF3MjXiyI1mSP17zHR04CIe9Drmyo5aXHAos7tqAwIgHdAKatdzCAVo3vNSjy9xSd3bAf9QcVp5r83JeMq2NH8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRzJhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLUw/+IBWmUzF2VcgshRogpaAV1AWKL4pKgAXv7Z8p2Me4s/ydDhBG\r\nJKC0x0TfnmeYOIax4oGfptJnDCcEuA1KdrLUVGLpQ83LfwstKl4JrBj7YFfb\r\n1z3PzzqpPeBw7WdKk9MLJ5NDy7nDR+oSeb2LqnRCr2Q3J3d6OxKbXZIeZctH\r\nsNUK/A80Zebi2lwmQcOOdbtszOiOtS6TKSRbmxXEIF2cyTSrFfc7yxPIkZcg\r\nMWYeoiOAYXkjhGzA42iemRs74d/NK49wudqVFxrKWtTbyKyVmDkya2DXyN4W\r\nwNcuMoMiKWMVXHIEP3oNHoOa1ttZ8WA336UNCpHyRVPts4geB8ZzwQx4wUJ1\r\n6QT+1EW/T4//wLNAaV3hAMbSpIcTCsTioDuqj+2mq5Nd+pizz6WK6ZPM02QN\r\nyhLTpwFph8FaGO0ght79y/ynmk9naCi7dNDZYOPIIsyR5AOW8gH9p4wJOavz\r\n9lkHBr6DJkyyD+QcVHptlS4UNiGcGoA/Z7yk7HfFw1UwhW91/laCDvZfTDEu\r\ne9aOpOKn3XFNodHUKxb3SaK1afS4ejmsmbbjGH3o5ctBDgLyomY5zEOUOqY4\r\nDDtvM63lG3NcVeJJv3F/YK6sAIWCaSzZu/inxtwDa1KmHbcNO7DHyPltpaH9\r\nqPBONxwjKwPtPxPgyNTE0GeHAc4xnBYR9dI=\r\n=cUQ/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"andremalveira","email":"andremalveira.dev@gmail.com"},"directories":{},"maintainers":[{"name":"andremalveira","email":"andremalveira.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/resizeobserver_0.1.0_1648833121734_0.019092810966177876"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2022-04-01T17:12:01.662Z","0.1.0":"2022-04-01T17:12:01.887Z","modified":"2023-06-28T14:51:31.759Z"},"maintainers":[{"name":"andremalveira","email":"andremalveira.dev@gmail.com"}],"description":"A Custom React Hook to observer the component resize.","homepage":"https://github.com/usejs/useResizeObserver#readme","keywords":["useResizeObserver","useresizeobserver","use-resize-observer","custom-hooks","react-custom-hooks","react-hooks"],"repository":{"type":"git","url":"git+https://github.com/usejs/useResizeObserver.git"},"author":{"name":"André Malveira","email":"andremalveira.dev@gmail.com"},"bugs":{"url":"https://github.com/usejs/useResizeObserver/issues"},"license":"MIT","readme":"\n <p align=\"center\"><img width=\"250\" src=\"https://usejs.github.io/.github/public/Use.transparent.png\"/></p>\n\n\n# <p align=\"center\">useResizeObserver</p>\n<p align=\"center\">\n<a href=\"#details\">\n<img src=\"https://img.shields.io/badge/License-MIT-319046?\" alt=\"License-MIT\"/>&nbsp;&nbsp;\n<img src=\"https://img.shields.io/badge/npm-0.1.0-319046?\" alt=\"License-MIT\"/></a>\n\n\n</p>\n\n<br/>\n\nA Custom Hook to observer the component resize.\n\n- Returns:<br/>\n  [ref](#ref) : `RefObject<HTMLDivElement>`<br/>\n  [width](#ref)? : `RefWidth`<br/>\n  [height](#ref)? : `RefHeight`<br/>\n\n- Argument<br/>\n  [callback](#callback)? : `callback: (entry: DOMRectReadOnly) => void`<br/>\n\n<br/>\n\n> Note: [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)\n> \n### Install\n```bash \nnpm i @_use/resizeobserver\n```\n\n### Usage\n\n```tsx \nimport useResizeObserver from '@_use/resizeobserver'\n\nconst DivResizeObserver = () => {\n\n  const [ ref, width, height ] = useResizeObserver(e => {\n    console.log(e)\n  })\n    console.log(width)\n\n  return (<>\n    <div ref={ref}>\n\n    <div/>\n  </>)\n}\n\nexport default DivResizeObserver\n```\n\n### Type\n> if you need `useResizeObserver` type, import inside `UseResizeObserver` braces with first letter capitalized.\n```ts\nimport useResizeObserver, { UseResizeObserver } from '@_use/resizeobserver'\n```\n\n```ts\ntype RefWidth = number | undefined\ntype RefHeight = number | undefined\n\ntype UseResizeObserver = (  callback?: (entry: DOMRectReadOnly) => void) => [\n  RefObject<HTMLDivElement>,\n  RefWidth?, \n  RefHeight?\n]\n```\n\n<br/>\n<br/>\n<br/>\n\n<p align=\"center\">Use.js &copy; 2022 | License MIT</p>","readmeFilename":"README.md"}