Registry / web-framework / react-resize-detector

react-resize-detector

library12.3.0jsnpmunverified

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.

web-framework

npm install react-resize-detector

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-RESIZE-DETEC

react-resize-detector

web-frameworkjavascriptv12.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useResizeDetector

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

✗ const useResizeDetector = require('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`.

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;

Debug

Known issues

breakingVersion 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).

affects: >=12.0.0

breakingThe `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 }) => { ... }`.

affects: >=11.0.0

breakingStarting 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.

affects: >=10.0.0

breakingVersion 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.

affects: >=10.0.0

gotchaWhen 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.

affects: All versions

Errors

Common errors & fixes

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

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.

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'.

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 }) => { ... }`.

Upgrade

Version history

12.3.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications. Required for rendering components and using hooks.

Agent activity

5 hits · last 30 days

node

Bingbot

Resources

githubhttps://github.com/maslianok/react-resize-detector ↗

packagehttps://www.npmjs.com/package/react-resize-detector ↗