React Resize Detector Hook

Common errors

• TypeError: (0 , react_resize_detector_1.useResizeDetector) is not a function

  cause Attempting to use `require()` for a pure ESM module, or incorrect import configuration in a CommonJS environment after upgrading to v12.
  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';`.

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause Attempting to use `useResizeDetector` in a class component or outside of a React functional component lifecycle.
  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.

• TS2345: Argument of type '(width: number, height: number) => void' is not assignable to parameter of type 'OnResizeCallback'.

  cause Using the old `onResize` callback signature after upgrading to v11 or higher.
  fix Update your `onResize` callback signature from `(width, height) => { ... }` to `({ width, height, entry }) => { ... }`.

Warnings

• breaking Version 12.0.0 migrated the module to be pure ESM. CommonJS `require()` statements will no longer work and will cause runtime errors.
  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).
• breaking 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.
  Fix: Refactor `onResize: (width, height) => { ... }` to `onResize: ({ width, height, entry }) => { ... }`.
• breaking 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.
  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.
• breaking Version 10.0.0 dropped support for React 16 and 17. The library now requires React 18 or 19.
  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.
• gotcha 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.
  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.

Install

• npm install react-resize-detector npm
• yarn add react-resize-detector yarn
• pnpm add react-resize-detector pnpm

Imports

• useResizeDetector
  wrong:

  const useResizeDetector = require('react-resize-detector');

  correct:

  import { useResizeDetector } from 'react-resize-detector';

  Since v12.0.0, this module is pure ESM, requiring `import` syntax. Attempting `require` will result in an error.
• OnResizeCallback

  import { OnResizeCallback } from 'react-resize-detector';

  Type import for TypeScript users defining an explicit callback signature.
• useResizeDetector with type argument

  import { useResizeDetector } from 'react-resize-detector';
  const { ref } = useResizeDetector<HTMLDivElement>();

  The hook is generic; specifying the HTML element type provides better type inference for the `ref`.

Quickstart

Demonstrates basic usage of `useResizeDetector` with an `onResize` callback to log dimensions, debounce updates, and attach the observer to a div element.

import { useCallback } from 'react';
import { useResizeDetector, OnResizeCallback } from 'react-resize-detector';

const MyResizableComponent = () => {
  const onResize: OnResizeCallback = useCallback((payload) => {
    if (payload.width !== null && payload.height !== null) {
      console.log('Component dimensions:', payload.width, 'x', payload.height);
      // Perform complex calculations or update state here
    } else {
      console.log('Element unmounted or dimensions not available.');
    }
  }, []);

  const { width, height, ref } = useResizeDetector<HTMLDivElement>({
    onResize,
    refreshMode: 'debounce', // Optional: 'throttle', 'debounce', or 'resize' (default)
    refreshRate: 100 // Optional: milliseconds for throttle/debounce
  });

  return (
    <div ref={ref} style={{ border: '1px solid blue', padding: '20px', minWidth: '100px', minHeight: '100px' }}>
      <p>Current size: {width}x{height}</p>
      <p>Resize your browser window or this container to see changes.</p>
    </div>
  );
};

export default MyResizableComponent;