{"id":11841,"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.","status":"active","version":"12.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/maslianok/react-resize-detector","tags":["javascript","react","resize","detector","resizeObserver","observer","typescript"],"install":[{"cmd":"npm install react-resize-detector","lang":"bash","label":"npm"},{"cmd":"yarn add react-resize-detector","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-resize-detector","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications. Required for rendering components and using hooks.","package":"react","optional":false}],"imports":[{"note":"Since v12.0.0, this module is pure ESM, requiring `import` syntax. Attempting `require` will result in an error.","wrong":"const useResizeDetector = require('react-resize-detector');","symbol":"useResizeDetector","correct":"import { useResizeDetector } from 'react-resize-detector';"},{"note":"Type import for TypeScript users defining an explicit callback signature.","symbol":"OnResizeCallback","correct":"import { OnResizeCallback } from 'react-resize-detector';"},{"note":"The hook is generic; specifying the HTML element type provides better type inference for the `ref`.","symbol":"useResizeDetector with type argument","correct":"import { useResizeDetector } from 'react-resize-detector';\nconst { ref } = useResizeDetector<HTMLDivElement>();"}],"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."},"warnings":[{"fix":"Update all `require()` statements to ES module `import` syntax. Ensure your project is configured for ESM (e.g., `\"type\": \"module\"` in package.json or using `.mjs` files).","message":"Version 12.0.0 migrated the module to be pure ESM. CommonJS `require()` statements will no longer work and will cause runtime errors.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Refactor `onResize: (width, height) => { ... }` to `onResize: ({ width, height, entry }) => { ... }`.","message":"The `onResize` callback signature changed in v11.0.0. It now receives a single object with `width`, `height`, and `entry` properties, instead of separate `width` and `height` arguments.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"Migrate any existing component-based usages to the `useResizeDetector` hook pattern. Refactor functional components to use the hook, or wrap class components if necessary.","message":"Starting with version 10.0.0, the library dropped support for all methods except the `useResizeObserver` hook. Legacy component-based APIs (like `withResizeDetector` HOC or render prop component) are no longer available.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Upgrade your React project to React 18 or 19. If unable to upgrade, you must stick to `react-resize-detector` versions prior to v10.0.0.","message":"Version 10.0.0 dropped support for React 16 and 17. The library now requires React 18 or 19.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Prefer the default usage where the `ref` returned by `useResizeDetector` is directly applied to the element you wish to observe. Only use `targetRef` when you have a clear understanding of its implications.","message":"When using an external ref (`targetRef` prop), be aware that dynamically mounting and unmounting the observed element can lead to unexpected behavior. The library advises against this advanced approach unless necessary.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project is configured for ES modules (e.g., `\"type\": \"module\"` in `package.json`). Change `const { useResizeDetector } = require('react-resize-detector');` to `import { useResizeDetector } from 'react-resize-detector';`.","cause":"Attempting to use `require()` for a pure ESM module, or incorrect import configuration in a CommonJS environment after upgrading to v12.","error":"TypeError: (0 , react_resize_detector_1.useResizeDetector) is not a function"},{"fix":"Ensure `useResizeDetector` is only called at the top level of your React functional components or custom hooks. For class components, consider refactoring to functional components or using a wrapper.","cause":"Attempting to use `useResizeDetector` in a class component or outside of a React functional component lifecycle.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Update your `onResize` callback signature from `(width, height) => { ... }` to `({ width, height, entry }) => { ... }`.","cause":"Using the old `onResize` callback signature after upgrading to v11 or higher.","error":"TS2345: Argument of type '(width: number, height: number) => void' is not assignable to parameter of type 'OnResizeCallback'."}],"ecosystem":"npm"}