Introduce children function support (#120)

I've found that children function support allows to pass sticky state to children components in a very handy way. This approach can be used instead of introducing another wrapper component that will handle state change with `onStateChange` and pass it to children components

Author: maxmalov

README.md

@@ -60,7 +60,7 @@ import Sticky from 'react-stickynode';
 
 ### Handling State Change
 
-You can be notified when the state of the sticky component changes by passing a callback to the `onStateChange` prop. The callback will receive an object in the format `{status: CURRENT_STATUS}`, with `CURRENT_STATUS` being an integer representing the status: 
+You can be notified when the state of the sticky component changes by passing a callback to the `onStateChange` prop. The callback will receive an object in the format `{status: CURRENT_STATUS}`, with `CURRENT_STATUS` being an integer representing the status:
 
 | Value | Name | Note|
 |-----|-----|-----|
@@ -83,9 +83,27 @@ const handleStateChange = (status) => {
 </Sticky>
 ```
 
-### Freezing 
+Also `Sticky` supports children functions:
 
-You can provide a function in the `shouldFreeze` prop which will tell the component to temporarily stop updating during prop and state changes, as well as ignore scroll and resize events. This function should return a boolean indicating whether the component should currently be frozen. 
+```js
+import Sticky from 'react-stickynode';
+
+<Sticky>
+  {status => {
+    if (status.status === Sticky.STATUS_FIXED) {
+      return 'the component is sticky';
+    }
+    if (status.status === Sticky.STATUS_ORIGINAL) {
+      return 'the component in the original position';
+    }
+    return 'the component is released'
+  }}
+</Sticky>
+```
+
+### Freezing
+
+You can provide a function in the `shouldFreeze` prop which will tell the component to temporarily stop updating during prop and state changes, as well as ignore scroll and resize events. This function should return a boolean indicating whether the component should currently be frozen.
 
 ## Install & Development
 

src/Sticky.jsx

@@ -380,10 +380,12 @@ class Sticky extends Component {
             [this.props.releasedClass]: this.state.status === STATUS_RELEASED
         })
 
+        var children = this.props.children;
+
         return (
             <div ref={(outer) => { this.outerElement = outer; }} className={outerClasses} style={outerStyle}>
                 <div ref={(inner) => { this.innerElement = inner; }} className='sticky-inner-wrapper' style={innerStyle}>
-                    {this.props.children}
+                    {typeof children === 'function' ? children({ status: this.state.status }) : children}
                 </div>
             </div>
         );

tests/unit/Sticky-test.js

@@ -171,6 +171,22 @@ describe('Sticky', function () {
         sinon.assert.calledWith(callback.secondCall, {status: Sticky.STATUS_ORIGINAL});
     });
 
+    it('should call the children function on state change', function () {
+        var childrenStub = sinon.stub().returns(null);
+        jsx.renderComponent(Sticky, { children: childrenStub });
+
+        sinon.assert.notCalled(childrenStub);
+
+        // Scroll down to 10px, and status should change to FIXED
+        window.scrollTo(0, 10);
+        sinon.assert.calledWith(childrenStub, {status: Sticky.STATUS_FIXED});
+
+        // Scroll up to 0px, and Sticky should reset
+        window.scrollTo(0, 0);
+        sinon.assert.calledTwice(childrenStub);
+        sinon.assert.calledWith(childrenStub.secondCall, {status: Sticky.STATUS_ORIGINAL});
+    });
+
     it('should work as expected (long Sticky)', function () {
         STICKY_HEIGHT = 1200;
         sticky = jsx.renderComponent(Sticky);