Pass width and height to arguments of onResize callback

bitmatica · Sep 13, 2016 · e0ae2bb · e0ae2bb
1 parent 125f441
commit e0ae2bb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ render(<App />, 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
@@ -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() {