v2.2.0

- Added onlyEvent property
- Added tag property

Author: Federico Zivolo

README.md

@@ -23,31 +23,94 @@ npm install react-resize-aware --save
 > **note**: `ResizeAware` needs a position different from `initial` to work!  
 > Make sure to set it to `relative`, `absolute` or `fixed` using its `style` property or with CSS
 
+## Stateless approach
+
+If your component is stateless or you prefer to follow a functional approach
+you can use ResizeAware to wrap your existing component and it will take care
+to provide two property (`height` and `width`) that will get updated every time
+the component sizes change.
+
 ```jsx
 import React from 'react';
 import ResizeAware from 'react-resize-aware';
 
-// This component will get rerendered everytime its width or height changes
+// This component will get re-rendered every time its width or height changes
 function MyComponent({width, height}) {
   return <div>{width}x{height}</div>;
 }
 
 function App() {
   return (
-    <ResizeAware onResize={({width, height}) => console.log(width, height)}>
+    <ResizeAware style={{ position: 'relative' }}>
       <MyComponent />
     </ResizeAware>
   );
 }
+```
+
+## Stateful approach
 
+If your component is stateful or you need to use ResizeAware in the middle of one
+of your components you can use the `onResize` property of the component to provide
+a callback that will be called on each resize of the ResizeAware component and will
+provide as first argument an object with `width` and `height` properties.
+
+```jsx
+import React, { Component } from 'react';
+import ResizeAware from 'react-resize-aware';
+
+function MyComponent({width, height}) {
+  return <div>{width}x{height}</div>;
+}
+
+class MyComponent extend Component {
+  handleResize = ({ width, height }) => console.log(width, height);
+  
+  render() {
+    return (
+      <div>
+        My app renders...
+        <ResizeAware
+          style={{ position: 'relative' }}
+          onlyEvent
+          onResize={this.handleResize}
+        >
+          <MyComponent />
+        </ResizeAware>
+      </div>
+    );
+  }
+}
 ```
 
-The child component of `ResizeAware` will have two new properties (`width` and `height`)
-always up to date with the real size of the element.
+## Properties
 
-Also, you can define an optional `onResize` property to make `ResizeAware` call
-it on each resize and get the updated sizes.
+- The `onlyEvent` property will prevent ResizeAware from passing the `height` and `width`
+properties to its child component, in case you don't want to rely on them.
+- The `tag` property allows to define the HTML tag used by ResizeAware to render.
+- The `onResize` property is an optional callback called on each resize with as first
+  argument an object containing `height` and `width` properties.
 
+<!-- ## Self containing
+
+If you need to keep your DOM structure clean and you don't want the additional
+`div` added by ResizeAware, you can use the component as base for your own one.
+
+```jsx
+import React from 'react';
+import ResizeAware from 'react-resize-aware';
+
+// This component will get re-rendered every time its width or height changes
+function MyComponent({width, height}) {
+  return <div style={{ position: 'relative' }}>{width}x{height}</div>;
+}
+
+function App() {
+  return (
+    <ResizeAware component={MyComponent} />
+  );
+}
+``` -->
 
 # License
 

docs/react-resize-aware.js

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

package.json

@@ -21,6 +21,10 @@ const objectStyle = {
 };
 
 export default class ResizeAware extends Component {
+  static defaultProps = {
+    tag: 'div',
+  };
+
   state = {
     width: undefined,
     height: undefined,
@@ -60,24 +64,24 @@ export default class ResizeAware extends Component {
   };
 
   render() {
-    const {children, onResize, ...props} = this.props;
+    const {children, onResize, onlyEvent, tag, ...props} = this.props;
     const {width, height} = this.state;
 
     return createElement(
-      'div',
+      tag,
       {
         ref: el => (this.container = el),
         ...props,
       },
-      cloneElement(children, {
-        width,
-        height,
-      }),
       createElement('object', {
         type: 'text/html',
         style: objectStyle,
         ref: el => (this.resizeElement = el),
         onLoad: this.handleObjectLoad,
+      }),
+      cloneElement(children, {
+        width: onlyEvent ? undefined : width,
+        height: onlyEvent ? undefined : height,
       })
     );
   }