v2.4.0

- Added makeResizeAware decorator

Author: Federico Zivolo

README.md

@@ -80,6 +80,7 @@ class MyComponent extend Component {
   }
 }
 ```
+
 ## Self containing
 
 If you need to keep your DOM structure clean and you don't want the additional
@@ -109,6 +110,43 @@ function App() {
 }
 ```
 
+## Decorator/enhancer
+
+In case you prefer to directly decorate your component to add to it the ResizeAware
+functionalities, you can do as follow:
+
+```
+import React from 'react';
+import { makeResizeAware } from 'react-resize-aware';
+
+export default makeResizeAware(function MyComponent({width, height, getRef, children})) {
+  return (
+    <div ref={getRef} style={{ position: 'relative' }}>
+      <span>{width}x{height}</span>
+      {children}
+    </div>
+  );
+})
+```
+
+Or, with ES7 decorators:
+
+```
+import React from 'react';
+import { makeResizeAware } from 'react-resize-aware';
+
+@makeResizeAware
+export default function MyComponent({width, height, getRef, children})) {
+  return (
+    <div ref={getRef} style={{ position: 'relative' }}>
+      <span>{width}x{height}</span>
+      {children}
+    </div>
+  );
+}
+```
+
+
 ## Properties
 
 - The `onlyEvent` property will prevent ResizeAware from passing the `height` and `width`

docs/example.js

@@ -49,7 +49,7 @@ function MyComponent(_ref) {
 }
 
 function App() {
-  return React.createElement(ReactResizeAware, {
+  return React.createElement(ReactResizeAware.default, {
     component: MyComponent,
     useBoundingClientRect: true,
     style: {position: 'relative'},

docs/react-resize-aware.js

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

package.json

@@ -6,6 +6,7 @@ export default {
   moduleName: 'ReactResizeAware',
   format: 'umd',
   sourceMap: true,
+  exports: 'named',
   external: ['react'],
   globals: {
     react: 'React',

rollup.config.js

@@ -68,7 +68,8 @@ export default class ResizeAware extends Component {
       component,
       {
         [hasCustomComponent ? 'getRef' : 'ref']: el => (this.container = el),
-        ...this.state,
+        width,
+        height,
         ...props,
       },
       createElement('object', {
@@ -81,3 +82,7 @@ export default class ResizeAware extends Component {
     );
   }
 }
+
+export function makeResizeAware(component) {
+  return props => React.createElement(ReactResizeAware, {component, ...props});
+}