Feature: children can also be a function returning the actual children

README.md

@@ -65,9 +65,13 @@ import Sticky from 'react-sticky-state';
 
 ```
 
-Sticky either takes its only child and adds the behavior and classes to it or wrappes all children inside an element if there are more than one. the tagname can be defined by props.
+Sticky as `children` takes either:
 
-### possible props 
+- its' only child and adds the behavior and classes to it, or
+- wraps all children inside an element if there are more than one. (The `tagName` can be defined by props.)
+- a function, which will receive `{ absolute: bool, sticky: bool, disabled: bool }` object as a first argument and should return a child or children. (Example usage: `<Sticky>{({ sticky }) => <Menu isCollapsed={sticky} />}</Sticky>`.)
+
+### possible props
 
 ```javascript
 static propTypes = {
@@ -88,7 +92,8 @@ static propTypes = {
       none : PropTypes.string,
       persist : PropTypes.bool,
       active : PropTypes.bool
-    })
+    }),
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
   };
 
   static defaultProps = {

lib/react-sticky-state.js

@@ -572,11 +572,17 @@ var ReactStickyState = function (_Component) {
   ReactStickyState.prototype.render = function render() {
     var _classNames, _classNames2, _classNames3, _classNames4;
 
+    var children = typeof this.props.children === 'function' ? this.props.children({
+      absolute: this.state.absolute,
+      disabled: this.state.disabled,
+      sticky: this.state.sticky
+    }) : this.props.children;
+
     if (!this.state.initialized) {
-      return this.props.children;
+      return children;
     }
 
-    var element = _react2.default.Children.only(this.props.children);
+    var element = _react2.default.Children.only(children);
 
     var _props = this.props,
         wrapperClass = _props.wrapperClass,
@@ -616,7 +622,7 @@ var ReactStickyState = function (_Component) {
       element = _react2.default.createElement(
         Comp,
         (0, _extends3.default)({ ref: refName, style: style, className: className }, props),
-        this.props.children
+        children
       );
     }
 
@@ -664,7 +670,8 @@ ReactStickyState.propTypes = {
     none: _propTypes2.default.string,
     persist: _propTypes2.default.bool,
     active: _propTypes2.default.bool
-  })
+  }),
+  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
 };
 ReactStickyState.defaultProps = {
   initialize: true,

src/react-sticky-state.js

@@ -113,7 +113,8 @@ class ReactStickyState extends Component {
       none : PropTypes.string,
       persist : PropTypes.bool,
       active : PropTypes.bool
-    })
+    }),
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
   };
 
   static defaultProps = {
@@ -584,12 +585,20 @@ class ReactStickyState extends Component {
   }
 
   render() {
+    const children =
+      typeof this.props.children === 'function'
+        ? this.props.children({
+            absolute: this.state.absolute,
+            disabled: this.state.disabled,
+            sticky: this.state.sticky,
+          })
+        : this.props.children;
 
     if(!this.state.initialized){
-      return this.props.children;
+      return children;
     }
 
-    let element = React.Children.only(this.props.children);
+    let element = React.Children.only(children);
 
     const { wrapperClass, stickyClass, fixedClass, stateClass, disabledClass, absoluteClass, disabled, debug, tagName, ...props } = this.props;
 
@@ -621,7 +630,7 @@ class ReactStickyState extends Component {
       element = React.cloneElement(element, { ref: refName, style: style, className: classNames(element.props.className, className) });
     } else {
       const Comp = this.props.tagName;
-      element = <Comp ref={ refName } style={ style } className={ className } {...props }>{this.props.children}</Comp>;
+      element = <Comp ref={ refName } style={ style } className={ className } {...props }>{children}</Comp>;
     }
 
     if (Can.sticky) {