This version introduces a new property - targetDomEl
.
targetDomEl is a DOM element to observe. By default it's a parent element in relation to the ReactResizeDetector component. But you can pass any DOM element to observe. This property is omitted when you pass querySelector
prop.
Before (findDOMNode
is called inside the library which may lead to React warnings in console)
render() {
return (
<div>
...
<ReactResizeDetector handleWidth handleHeight />
</div>
);
}
After (the logic is equal to the above example except the fact that findDOMNode isn't called anymore)
constructor() {
this.parentRef = React.createRef();
}
render() {
return (
<div ref={this.parentRef}>
...
<ReactResizeDetector handleWidth handleHeight targetDomEl={this.parentRef.current} />
</div>
);
}