v2.4.1

- Allow multiple children

Author: Federico Zivolo

docs/example.js

@@ -51,7 +51,6 @@ function MyComponent(_ref) {
 function App() {
   return React.createElement(ReactResizeAware.default, {
     component: MyComponent,
-    useBoundingClientRect: true,
     style: {position: 'relative'},
     onResize: function onResize(sizes) {
       return console.log(sizes);

docs/react-resize-aware.js

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

package.json

@@ -67,6 +67,48 @@ exports[`allows to define an \`onResize\` property 1`] = `
 </ResizeAware>
 `;
 
+exports[`allows to use its child as target 1`] = `
+<ResizeAware
+  component="div"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <object
+      onLoad={[Function]}
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+      type="text/html"
+    />
+    <DummyComponent>
+      <div>
+        x
+      </div>
+    </DummyComponent>
+  </div>
+</ResizeAware>
+`;
+
 exports[`allows to use its children as target 1`] = `
 <ResizeAware
   component="div"

src/__snapshots__/index.spec.jsx.snap

@@ -6,7 +6,7 @@
 // Copyright 2016, Federico Zivolo
 //
 
-import {createElement, Component, cloneElement} from 'react';
+import {createElement, Component, Children, cloneElement} from 'react';
 
 const style = {
   display: 'block',
@@ -62,14 +62,13 @@ export default class ResizeAware extends Component {
     const {width, height} = this.state;
 
     const hasCustomComponent = typeof component !== 'string';
-    const passSizeProps = !onlyEvent && hasCustomComponent;
 
     return createElement(
       component,
       {
         [hasCustomComponent ? 'getRef' : 'ref']: el => (this.container = el),
-        width,
-        height,
+        width: hasCustomComponent ? width : undefined,
+        height: hasCustomComponent ? height : undefined,
         ...props,
       },
       createElement('object', {
@@ -78,7 +77,9 @@ export default class ResizeAware extends Component {
         ref: el => (this.resizeElement = el),
         onLoad: this.handleObjectLoad,
       }),
-      !!children && cloneElement(children, passSizeProps ? this.state : null)
+      Children.map(children, child =>
+        cloneElement(child, !onlyEvent ? this.state : null)
+      )
     );
   }
 }

src/index.js

@@ -11,7 +11,7 @@ function DummyComponent2({getRef, ...props}) {
   return <div ref={getRef} {...props} />;
 }
 
-it('allows to use its children as target', () => {
+it('allows to use its child as target', () => {
   const wrapper = mount(
     <ResizeAware style={{position: 'relative'}}>
       <DummyComponent />
@@ -21,6 +21,19 @@ it('allows to use its children as target', () => {
   expect(toJson(wrapper)).toMatchSnapshot();
 });
 
+it('allows to use itself between a component markup', () => {
+  const wrapper = mount(
+    <div>
+      <ResizeAware style={{position: 'relative'}}>
+        <div />
+        <div />
+      </ResizeAware>
+    </div>
+  );
+
+  expect(toJson(wrapper)).toMatchSnapshot();
+});
+
 it('allows to define an `onResize` property', () => {
   const handleResize = jest.fn();
   const wrapper = mount(