{"library":"react-use-measure","title":"React Hook to Measure Element Bounds","description":"`react-use-measure` is a utility hook for React applications designed to precisely measure the bounding box of a referenced DOM element. It provides reactive updates to an element's dimensions and position (`x`, `y`, `width`, `height`, `top`, `right`, `bottom`, `left`), responding to changes in size, window scroll, and even nested scroll areas, which significantly differentiates it from standard `getBoundingClientRect`. This addresses a common challenge in web development where relative coordinates and offsets within complex scrollable layouts are difficult to ascertain reliably. The package is currently stable at version 2.1.7, with recent minor fix releases indicating active maintenance. It is part of the `pmndrs` ecosystem and leverages `ResizeObserver` for efficient updates. It ships with TypeScript types, promoting strong typing in projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-use-measure"],"cli":null},"imports":["import useMeasure from 'react-use-measure'","import { ResizeObserver } from '@juggle/resize-observer'","import { mergeRefs } from 'react-merge-refs'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import useMeasure from 'react-use-measure';\nimport { useRef, useEffect } from 'react';\nimport { ResizeObserver } from '@juggle/resize-observer'; // Optional polyfill\n\nfunction App() {\n  const [ref, bounds] = useMeasure({\n    // Optional: inject a polyfill if your target environments don't support ResizeObserver\n    polyfill: typeof window !== 'undefined' && 'ResizeObserver' in window ? undefined : ResizeObserver,\n    debounce: 100, // Debounce updates for performance\n    scroll: true // React to scroll changes within parent elements\n  });\n\n  // Example of using the bounds in a side effect\n  useEffect(() => {\n    if (bounds.width > 0) {\n      console.log('Element dimensions:', bounds.width, 'x', bounds.height);\n    }\n  }, [bounds]);\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ccc', marginBottom: '20px' }}>\n      <h1>ResizeObserver Hook Example</h1>\n      <p>Resize your browser window or interact with the measured div.</p>\n      <div\n        ref={ref}\n        style={{\n          width: '50%',\n          minHeight: '100px',\n          background: 'lightblue',\n          resize: 'both', // Allows manual resizing\n          overflow: 'auto',\n          margin: '20px auto',\n          padding: '10px'\n        }}\n      >\n        <p>This div is measured:</p>\n        <p>Width: {bounds.width}px</p>\n        <p>Height: {bounds.height}px</p>\n        <p>Top: {bounds.top}px, Left: {bounds.left}px</p>\n        <div style={{ height: '200px', width: '100%', background: 'lightcoral', marginTop: '10px' }}>\n          Scrollable content inside.\n          {Array.from({ length: 50 }).map((_, i) => <div key={i}>Item {i}</div>)}\n        </div>\n      </div>\n      <div style={{ height: '500px', background: '#eee' }}>\n        A larger container to enable page scrolling and demonstrate `scroll: true`.\n      </div>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to use `useMeasure` to get reactive bounds of a resizable and scrollable div, including optional polyfill injection and debouncing of updates. It also shows how to access the `bounds` object after the initial render.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}