{"id":15369103,"url":"https://github.com/developit/simple-element-resize-detector","last_synced_at":"2025-04-05T22:08:10.647Z","repository":{"id":57360071,"uuid":"77981744","full_name":"developit/simple-element-resize-detector","owner":"developit","description":"Observes element size changes using a hidden iframe","archived":false,"fork":false,"pushed_at":"2019-06-13T13:03:00.000Z","size":12,"stargazers_count":189,"open_issues_count":3,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T21:06:42.315Z","etag":null,"topics":["dom","dom-mutation-observers","dom-utilities","element-resizes","observes-resizing"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-04T04:54:12.000Z","updated_at":"2023-12-01T20:06:11.000Z","dependencies_parsed_at":"2022-09-06T22:23:04.335Z","dependency_job_id":null,"html_url":"https://github.com/developit/simple-element-resize-detector","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fsimple-element-resize-detector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fsimple-element-resize-detector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fsimple-element-resize-detector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fsimple-element-resize-detector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/simple-element-resize-detector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406090,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","dom-mutation-observers","dom-utilities","element-resizes","observes-resizing"],"created_at":"2024-10-01T13:34:11.177Z","updated_at":"2025-04-05T22:08:10.591Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","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, () =\u003e {\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, () =\u003e {});\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 `\u003ciframe\u003e`s to detect when an element resizes. `\u003ciframe\u003e`s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fsimple-element-resize-detector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Fsimple-element-resize-detector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fsimple-element-resize-detector/lists"}