What is react-resize-detector?
The react-resize-detector is a React component designed to handle resize events for React elements. It provides a simple and efficient way to trigger a function or render logic when the size of an element changes. This is particularly useful in responsive designs and when elements need to adjust based on their container's dimensions.
What are react-resize-detector's main functionalities?
Basic resize detection
This feature allows you to detect the size of a component and react to changes. The `useResizeDetector` hook provides `width`, `height`, and `ref` which you attach to the component you want to monitor. The component re-renders whenever the size changes, displaying the new dimensions.
import React from 'react';
import useResizeDetector from 'react-resize-detector';
const ResponsiveComponent = () => {
const { width, height, ref } = useResizeDetector();
return (
<div ref={ref}>
Size: {width} x {height}
</div>
);
};
export default ResponsiveComponent;
OnResize callback
This feature uses the `withResizeDetector` higher-order component to monitor size changes. It provides `width`, `height`, and an `onResize` callback that is triggered on every resize event. This is useful for performing actions or calculations based on the new size.
import React from 'react';
import { withResizeDetector } from 'react-resize-detector';
class MyComponent extends React.Component {
render() {
const { width, height, onResize } = this.props;
return (
<div onResize={onResize}>
Current size: {width} x {height}
</div>
);
}
}
export default withResizeDetector(MyComponent, {
handleWidth: true,
handleHeight: true,
onResize: (width, height) => console.log(`Resized to ${width} x ${height}`)
});
Other packages similar to react-resize-detector
react-sizeme
react-sizeme is another package that provides similar functionality to react-resize-detector. It allows components to respond to changes in size. However, react-sizeme uses a higher-order component approach primarily, which might be less convenient than hooks provided by react-resize-detector in functional components.
resize-observer-polyfill
This package is a polyfill for the ResizeObserver API, which is used to report changes to the dimensions of an Element's content or border box. It's more of a low-level API compared to react-resize-detector, which provides React-specific abstractions and hooks for easier integration in React applications.
Handle element resizes like it's 2018!
Nowadays browsers start supporting element resize handling natively using ResizeObserver. And we use this feature (with polyfill) to help you handle element resizes in React.
⚠️ This change intriduced in v.2.0.0
For older implementations please checkout this branch v.1.1.0
Demo
Local demo:
git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/examples
npm i && npm start
Installation
npm i react-resize-detector
// OR
yarn add react-resize-detector
Example
import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';
class App extends PureComponent {
render() {
return (
<div>
...
<ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
</div>
);
}
onResize = () => {
...
}
}
render(<App />, document.getElementById('root'));
API
onResize
(Func) Function that will be invoked with width
and height
arguments.
handleWidth
(Bool) Trigger onResize
on width change. Default: false
.
handleHeight
(Bool) Trigger onResize
on height change. Default: false
.
skipOnMount
(Bool) Do not trigger onResize when a component mounts. Default: false
.
resizableElementId
(String) Id of the element we want to observe. If no one provided, parentElement of the component will be used. Default: ``.
refreshMode
(String) Possible values: throttle
and debounce
See lodash docs for more information. Default: undefined
- means that callback will be fired as often as ResizeObserver allows
refreshRate
(Number) Makes sense only when refreshMode
is set. Default: 1000
. Important! It's numeric prop so set it correctly, e.g. refreshRate={500}
License
MIT