{"repo":"ZeeCoder/use-resize-observer","free":true,"listed":false,"github":"https://github.com/ZeeCoder/use-resize-observer","clone":"git clone https://github.com/ZeeCoder/use-resize-observer.git","description":"A React hook that allows you to use a ResizeObserver to measure an element's size.","language":"TypeScript","stars":681,"topics":["react","reactjs","resizeobserver","react-hook","css-in-js","container-query","measure","size","resize"],"license":"MIT","category":"ui-components","readme_excerpt":"use-resize-observer A React hook that allows you to use a ResizeObserver to measure an element's size. Upgrading from v9? v10 has several breaking changes, see MIGRATION.md. Highlights - Written in TypeScript . - Zero runtime dependencies. - Tiny : under 1kB (minified, gzipped), monitored by size-limit (budget). - Ships ESM and CJS builds. - Exposes an onResize callback if you need more control, receiving the raw ResizeObserverEntry along with the measured size. - box option. - Works with SSR . - Works with CSS-in-JS . - Supports custom refs in case you had one already. - Uses RefCallback by default to address delayed mounts and changing ref elements. - Handles many edge cases you might not even think of. (See this documentation and the test cases.) - Easy to compose (Throttle / Debounce, Breakpoints, Element Coordinates) - Tested in real browsers (latest Chrome, Firefox, Edge and Safari, plus real iOS and Android devices, sponsored by BrowserStack) Requirements - React 18.2 or newer (the peer range is open-ended, so future majors work too). - A ResizeObserver implementation. It is available in all modern browsers. To support an environment without it, either polyfill it yourself, or skip observation entirely. In Action CodeSandbox Demo Install Options Option Type Description Default -------- ------------------------------------------------------------------------------------ -----------------------------------------------------------------------------------------------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/ZeeCoder","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ZeeCoder/use-resize-observer/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}