{"id":28302060,"url":"https://github.com/bootstarted/react-resize-observer","last_synced_at":"2025-06-13T04:30:52.719Z","repository":{"id":57343563,"uuid":"58685447","full_name":"bootstarted/react-resize-observer","owner":"bootstarted","description":"Component for giving you `onResize`.","archived":false,"fork":false,"pushed_at":"2018-11-29T16:46:29.000Z","size":356,"stargazers_count":48,"open_issues_count":4,"forks_count":0,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-31T03:51:23.718Z","etag":null,"topics":["bootstart","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bootstarted.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-13T00:02:22.000Z","updated_at":"2024-05-24T09:08:50.000Z","dependencies_parsed_at":"2022-09-12T07:00:35.476Z","dependency_job_id":null,"html_url":"https://github.com/bootstarted/react-resize-observer","commit_stats":null,"previous_names":["metalabdesign/react-resize-observer"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/bootstarted/react-resize-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Freact-resize-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Freact-resize-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Freact-resize-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Freact-resize-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bootstarted","download_url":"https://codeload.github.com/bootstarted/react-resize-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Freact-resize-observer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259580554,"owners_count":22879679,"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":["bootstart","react"],"created_at":"2025-05-23T20:13:36.157Z","updated_at":"2025-06-13T04:30:52.713Z","avatar_url":"https://github.com/bootstarted.png","language":"JavaScript","readme":"# react-resize-observer\n\nComponent for giving you `onResize`.\n\n![build status](http://img.shields.io/travis/metalabdesign/react-resize-observer/master.svg?style=flat)\n![coverage](http://img.shields.io/coveralls/metalabdesign/react-resize-observer/master.svg?style=flat)\n![license](http://img.shields.io/npm/l/react-resize-observer.svg?style=flat)\n![version](http://img.shields.io/npm/v/react-resize-observer.svg?style=flat)\n![downloads](http://img.shields.io/npm/dm/react-resize-observer.svg?style=flat)\n\n## Overview\n\nPrimarily based on [this work] by Marc J. Schmidt.\n\n## Usage\n\n```\nnpm install --save react react-dom react-resize-observer\n```\n\nAdd `ResizeObserver` to the element whose size or position you want to measure. The only requirement is that your component must _not_ have a `position` of `static` (see [Caveats](#caveats) section.\n\n```jsx\nimport ResizeObserver from 'react-resize-observer';\n\nconst MyComponent = () =\u003e (\n  \u003cdiv style={{position: 'relative'}}\u003e\n    Hello World\n    \u003cResizeObserver\n      onResize={(rect) =\u003e {\n        console.log('Resized. New bounds:', rect.width, 'x', rect.height);\n      }}\n      onPosition={(rect) =\u003e {\n        console.log('Moved. New position:', rect.left, 'x', rect.top);\n      }}\n    /\u003e\n  \u003c/div\u003e\n);\n```\n\n## Component Props\n\n### `onResize`: function\n\n*optional*\n\nCalled with a single [`DOMRect`] argument when a size change is detected.\n\n### `onPosition`: function\n\n*optional*\n\nCalled with a single [`DOMRect`] argument when a position change is detected.\n\n### `onReflow`: function\n\n*optional*\n\nCalled with a single [`DOMRect`] argument when either a position or size change is detected.\n\n## Caveats\n\n#### Target Element Style\n\n`ResizeObserver` will detect changes in the size or position of the closest containing block (an element with a position other than `static`) - so use either `fixed`, `absolute`, or `relative` on the element you are measuring.\n\nThe mechanism used to detect element size changes relies on the behavior of nested, absolutely positioned elements and their ability to trigger scroll events on their parent element. This is the reason this library is implemented as a rendered child element, and not as component enhancer.\n\n#### Position Detection\n\nThe `onPosition` (an `onReflow`) callbacks will detect when the measured element's position in the viewport changes, but only when the change is caused by a scroll event of the window or an ancestor element with `overflow: scroll`. Position changes caused by other factors (i.e. `transform`, `margin`, `top`/`left` etc.) will not be immediately detected - although these changes will be observed and returned the next time a scroll event is captured.\n\nIf absolutely you need to capture position changes caused by style updates, calling `document.body.dispatchEvent(new UIEvent('scroll'))` will cause any mounted `ResizeObserver` instances to update.\n\n#### Callback Result\n\nThis component returns raw `DOMRect` instances as the callback argument. `DOMRect` instances return `{}` when serialized to JSON (which will cause them to appear empty in Redux DevTools). `DOMRect` instances may crash the React Developer Tools extension if you try to inspect them as part of component state.\n\nIf any of these quirks become an issue, the solution is to map the values you need onto a plain object: https://stackoverflow.com/questions/39417566.\n\n[this work]: https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js\n[`DOMRect`]: https://developer.mozilla.org/en-US/docs/Web/API/DOMRect\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstarted%2Freact-resize-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbootstarted%2Freact-resize-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstarted%2Freact-resize-observer/lists"}