v2.1.0

new onResize prop

Author: Federico Zivolo

README.md

@@ -34,14 +34,20 @@ function MyComponent({width, height}) {
 
 function App() {
   return (
-    <ResizeAware>
+    <ResizeAware onResize={({width, height}) => console.log(width, height)}>
       <MyComponent />
     </ResizeAware>
   );
 }
 
 ```
 
+The child component of `ResizeAware` will have two new properties (`width` and `height`)
+always up to date with the real size of the element.
+
+Also, you can define an optional `onResize` property to make `ResizeAware` call
+it on each resize and get the updated sizes.
+
 
 # License
 

docs/example.js

@@ -11,8 +11,13 @@ function MyComponent({width, height}) {
 function App() {
   return React.createElement(
     ReactResizeAware,
-    {style: {position: 'relative'}},
-    React.createElement(MyComponent)
+    {
+      style: {position: 'relative'},
+      onResize(sizes) {
+        console.log(sizes);
+      },
+    },
+    React.createElement(MyComponent, null)
   );
 }
 

docs/react-resize-aware.js

@@ -1,6 +1,6 @@
 {
   "name": "react-resize-aware",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A resize aware component used to detect sizes changes on your components",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -51,14 +51,16 @@ export default class ResizeAware extends Component {
 
   // Function called on component resize
   handleResize = () => {
-    this.setState({
+    const sizes = {
       width: this.container.offsetWidth,
       height: this.container.offsetHeight,
-    });
+    };
+    this.setState(sizes);
+    this.props.onResize && this.props.onResize(sizes);
   };
 
   render() {
-    const {children, ...props} = this.props;
+    const {children, onResize, ...props} = this.props;
     const {width, height} = this.state;
 
     return createElement(