Allow render props

src/TrackVisibility.js

@@ -27,6 +27,7 @@ export default class TrackVisibility extends Component {
      * Pass one or more children to track
      */
     children: PropTypes.oneOfType([
+      PropTypes.func,
       PropTypes.element,
       PropTypes.arrayOf(PropTypes.element)
     ]),
@@ -104,35 +105,42 @@ export default class TrackVisibility extends Component {
     });
     return props;
   }
-
-  getChildren() {
-    return React.Children.map(this.props.children, child =>
-      React.cloneElement(child, {
-        ...this.getChildProps(),
-        isVisible: this.state.isVisible
-      })
-    );
-  }
-
+
   isComponentVisible = () => {
     const html = document.documentElement;
     const { offset, partialVisibility, once } = this.props;
     const { top, left, bottom, right, width, height } = this.nodeRef.getBoundingClientRect();
     const heightCheck = window.innerHeight + offset || html.clientHeight + offset;
     const widthCheck = window.innerWidth + offset || html.clientWidth + offset;
-
+    
     const isVisible = partialVisibility
-      ? top + height >= 0 && left + width >= 0 && right - width <= widthCheck
-      : top >= 0 && left >= 0 && bottom <= heightCheck && right <= widthCheck;
-
+    ? top + height >= 0 && left + width >= 0 && right - width <= widthCheck
+    : top >= 0 && left >= 0 && bottom <= heightCheck && right <= widthCheck;
+    
     if (isVisible && once) {
       this.removeListener();
     }
-
+    
     this.setState({ isVisible });
   }
-
+  
   setNodeRef = ref => this.nodeRef = ref;
+
+  getChildren() {
+    if(typeof this.props.children === "function") {
+      return this.props.children({
+        ...this.getChildProps(),
+        isVisible: this.state.isVisible
+      })
+    }
+
+    return React.Children.map(this.props.children, child =>
+      React.cloneElement(child, {
+        ...this.getChildProps(),
+        isVisible: this.state.isVisible
+      })
+    );
+  }
 
   render() {
     const { className, style } = this.props;

src/__tests__/TrackVisibility.js

@@ -22,6 +22,15 @@ describe('<TrackVisibility />', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
+    it("Should be able to use a render props", () => {
+      const wrapper = mount(
+        <TrackVisibility>
+          {({ isVisible }) => <Dumb />}
+        </TrackVisibility>
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
     it('Should fallback clientHeight when window propeties are not defined', () => {
       const wrapper = mount(<TrackVisibility />);
       window.innerHeight = null;

src/__tests__/__snapshots__/TrackVisibility.js.snap

@@ -26,6 +26,25 @@ exports[`<TrackVisibility /> When rendering the component Can check partial visi
 </TrackVisibility>
 `;
 
+exports[`<TrackVisibility /> When rendering the component Should be able to use a render props 1`] = `
+<TrackVisibility
+  className={null}
+  offset={0}
+  once={false}
+  partialVisibility={false}
+  style={null}
+  throttleInterval={150}
+>
+  <div>
+    <Dumb>
+      <div>
+        Plop
+      </div>
+    </Dumb>
+  </div>
+</TrackVisibility>
+`;
+
 exports[`<TrackVisibility /> When rendering the component Should fallback clientHeight when window propeties are not defined 1`] = `
 <TrackVisibility
   className={null}