@rc-component/resize-observer

rc-resize-observer

Resize observer for React.

Live Demo

https://resize-observer-react-component.vercel.app/

Install

Usage

import ResizeObserver from 'rc-resize-observer';
import { render } from 'react-dom';

render(
  <ResizeObserver
    onResize={() => {
      console.log('resized!');
    }}
  >
    <textarea />
  </ResizeObserver>,
  mountNode,
);

API

Property	Type	Default	Description
disabled	boolean	false
onResize	({ width, height }) => void	-	Trigger when child node resized

Development

npm install
npm start

License

rc-resize-observer is released under the MIT license.

Similar packages

Other packages similar to @rc-component/resize-observer

resize-observer-polyfill

resize-observer-polyfill is a polyfill for the ResizeObserver API, which is a native browser API for observing changes to element sizes. Unlike @rc-component/resize-observer, which is a React-specific implementation, resize-observer-polyfill can be used in any JavaScript environment to provide similar functionality.

react-resize-detector

react-resize-detector is another React component for detecting element resizes. It offers similar functionality to @rc-component/resize-observer but includes additional features like debounce and throttle options for the resize event, which can help optimize performance in certain scenarios.

react-sizeme

react-sizeme is a higher-order component that provides size information to wrapped components. It is similar to @rc-component/resize-observer in that it helps manage responsive design, but it focuses on providing size data as props to components, allowing for more declarative size handling.