{"library":"react-resize-detector","title":"React Resize Detector Hook","description":"react-resize-detector is a React library that leverages the native `ResizeObserver` API to detect element size changes within React applications. It provides a `useResizeDetector` hook for integrating resize observation directly into functional components. The current stable version is 12.3.0. Releases are somewhat frequent, with multiple major versions (v10, v11, v12) released within the last year, indicating active development and occasional breaking changes. Key differentiators include its small bundle size (~2kb), TypeScript support, and reliance on native `ResizeObserver` over `window.resize` listeners or timeouts, offering performant and accurate resize detection. The library is designed for scenarios requiring JavaScript-based resize logic, complex dimension-based calculations, or integration with React state/effects, differentiating itself from purely CSS-based container queries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-resize-detector"],"cli":null},"imports":["import { useResizeDetector } from 'react-resize-detector';","import { OnResizeCallback } from 'react-resize-detector';","import { useResizeDetector } from 'react-resize-detector';\nconst { ref } = useResizeDetector<HTMLDivElement>();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useCallback } from 'react';\nimport { useResizeDetector, OnResizeCallback } from 'react-resize-detector';\n\nconst MyResizableComponent = () => {\n  const onResize: OnResizeCallback = useCallback((payload) => {\n    if (payload.width !== null && payload.height !== null) {\n      console.log('Component dimensions:', payload.width, 'x', payload.height);\n      // Perform complex calculations or update state here\n    } else {\n      console.log('Element unmounted or dimensions not available.');\n    }\n  }, []);\n\n  const { width, height, ref } = useResizeDetector<HTMLDivElement>({\n    onResize,\n    refreshMode: 'debounce', // Optional: 'throttle', 'debounce', or 'resize' (default)\n    refreshRate: 100 // Optional: milliseconds for throttle/debounce\n  });\n\n  return (\n    <div ref={ref} style={{ border: '1px solid blue', padding: '20px', minWidth: '100px', minHeight: '100px' }}>\n      <p>Current size: {width}x{height}</p>\n      <p>Resize your browser window or this container to see changes.</p>\n    </div>\n  );\n};\n\nexport default MyResizableComponent;","lang":"typescript","description":"Demonstrates basic usage of `useResizeDetector` with an `onResize` callback to log dimensions, debounce updates, and attach the observer to a div element.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}