feat: Added child function support

Author: Federico Zivolo

README.md

@@ -117,6 +117,25 @@ function App() {
 }
 ```
 
+## Child function
+
+Whenever you want to manipulate the `width` and `height` properties before they
+get passed down to the child component, you can define a function as child of ResizeAware:
+
+```jsx
+import React from 'react';
+import ResizeAware from 'react-resize-aware';
+
+export default makeResizeAware(function MyComponent({width, height, getRef, children})) {
+  return (
+    <ResizeAware style={{ position: 'relative' }}>
+      {({ width, height }) =>
+        <div style={{ width: width / 2, height: height / 2 }} />}
+    </ResizeAware>
+  );
+})
+```
+
 ## Decorator/enhancer
 
 In case you prefer to directly decorate your component to add to it the ResizeAware

docs/react-resize-aware.js

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

package.json

@@ -111,12 +111,50 @@ exports[`allows to define custom width and height names 1`] = `
     <Test
       customHeight={10}
       customWidth={10}
-    >
-      <div
-        customHeight={10}
-        customWidth={10}
-      />
-    </Test>
+    />
+  </div>
+</ResizeAware>
+`;
+
+exports[`allows to use a function as child 1`] = `
+<ResizeAware
+  component="div"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <object
+      aria-hidden={true}
+      onLoad={[Function]}
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+      tabIndex={-1}
+      type="text/html"
+    />
+    <div
+      height={10}
+      width={10}
+    />
   </div>
 </ResizeAware>
 `;

src/__snapshots__/index.spec.jsx.snap

@@ -6,7 +6,13 @@
 // Copyright 2016, Federico Zivolo
 //
 
-import { createElement, Component, Children, cloneElement } from 'react';
+import {
+  createElement,
+  Component,
+  Children,
+  cloneElement,
+  isValidElement,
+} from 'react';
 
 const style = {
   display: 'block',
@@ -81,12 +87,16 @@ export default class ResizeAware extends Component {
     const widthProp = [widthPropName || 'width'];
     const heightProp = [heightPropName || 'height'];
 
+    const sizes = {
+      [widthProp]: width,
+      [heightProp]: height,
+    };
+
     return createElement(
       component,
       {
         [hasCustomComponent ? 'getRef' : 'ref']: el => (this.container = el),
-        [widthProp]: hasCustomComponent ? width : undefined,
-        [heightProp]: hasCustomComponent ? height : undefined,
+        ...(hasCustomComponent && sizes),
         ...props,
       },
       createElement('object', {
@@ -97,12 +107,15 @@ export default class ResizeAware extends Component {
         'aria-hidden': true,
         tabIndex: -1,
       }),
-      Children.map(children, child =>
-        cloneElement(
-          child,
-          !onlyEvent ? { [widthProp]: width, [heightProp]: height } : null
-        )
-      )
+      typeof children === 'function'
+        ? children({ width, height })
+        : Children.map(
+            children,
+            child =>
+              isValidElement(child)
+                ? cloneElement(child, !onlyEvent ? sizes : null)
+                : child
+          )
     );
   }
 }

src/index.js

@@ -63,7 +63,7 @@ it('applies aria attributes to <object> to avoid screenreader issues', () => {
 });
 
 it('allows to define custom width and height names', () => {
-  const Test = props => <div {...props} />;
+  const Test = props => null;
   const wrapper = mount(
     <ResizeAware
       style={{ position: 'relative' }}
@@ -78,3 +78,15 @@ it('allows to define custom width and height names', () => {
 
   expect(toJson(wrapper)).toMatchSnapshot();
 });
+
+it('allows to use a function as child', () => {
+  const wrapper = mount(
+    <ResizeAware style={{ position: 'relative' }}>
+      {({ width, height }) => <div width={width} height={height} />}
+    </ResizeAware>
+  );
+
+  wrapper.setState({ width: 10, height: 10 });
+
+  expect(toJson(wrapper)).toMatchSnapshot();
+});