diff --git a/README.md b/README.md index 332ebb0..70cc599 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ render(, document.getElementById('root')); (Bool) Trigger `onResize` on height change #### onResize -(Func) Function that will be invoked +(Func) Function that will be invoked with `width` and `height` arguments. When handling only one of dimensions, other argument will be `undefined`. ## License MIT diff --git a/src/components/ResizeDetector.js b/src/components/ResizeDetector.js index ea64026..992ab1a 100644 --- a/src/components/ResizeDetector.js +++ b/src/components/ResizeDetector.js @@ -22,7 +22,8 @@ export default class ResizeDetector extends Component { } componentDidMount() { - this.reset(); + const [width, height] = this.containerSize(); + this.reset(width, height); } shouldComponentUpdate(nextProps) { @@ -37,7 +38,14 @@ export default class ResizeDetector extends Component { this.shrink.scrollTop = this.shrink.scrollHeight; } - reset() { + containerSize() { + return [ + this.props.handleWidth && this.container.parentElement.offsetWidth, + this.props.handleHeight && this.container.parentElement.offsetHeight, + ]; + } + + reset(containerWidth, containerHeight) { if (typeof window === 'undefined') { return; } @@ -57,8 +65,8 @@ export default class ResizeDetector extends Component { this.setState({ expandChildHeight: this.expand.offsetHeight + 10, expandChildWidth: this.expand.offsetWidth + 10, - lastWidth: this.props.handleWidth && this.container.parentElement.offsetWidth, - lastHeight: this.props.handleHeight && this.container.parentElement.offsetHeight, + lastWidth: containerWidth, + lastHeight: containerHeight, }); } @@ -69,14 +77,12 @@ export default class ResizeDetector extends Component { const { state, props } = this; - if ( - (props.handleWidth && this.container.parentElement.offsetWidth !== state.lastWidth) || - (props.handleHeight && this.container.parentElement.offsetHeight !== state.lastHeight) - ) { - this.props.onResize(); + const [width, height] = this.containerSize(); + if ((width !== state.lastWidth) || (height !== state.lastHeight)) { + this.props.onResize(width, height); } - this.reset(); + this.reset(width, height); } render() {