React FloatingElement

gistfile1.js

var FloatingElement = React.createClass({

  propTypes: {
    children: React.PropTypes.element.isRequired,
    floatingClassName: React.PropTypes.string
  },

  getDefaultProps() {
    return {
      floatingClassName: 'floating'
    };
  },

  getInitialState() {
    return {
      float: false  
    };
  },

  render() {
    return (
      <div>
        <div ref="container">
          {this.props.children}
        </div>
        {this.state.float && 
          this.renderFloatingChild()
        }
      </div>
    );
  },

  renderFloatingChild() {
    var child = this.props.children;
    var classes = child.props.className + ' ' + this.props.floatingClassName;

    return React.cloneElement(child, {className: classes});
  },

  componentDidMount() {
    $(window).on('resize scroll', this.handleReflow);
    this.handleReflow();
  },

  componentWillUnmount() {
    $(window).off('resize scroll', this.handleReflow);
  },

  componentDidUpdate() {
    this.handleReflow();
  },

  handleReflow(e) {
    var $window = $(window);
    var $container = $(React.findDOMNode(this.refs.container));
    var windowBottom = $window.scrollTop() + $window.height();
    var containerBottom = $container.offset().top + $container.outerHeight();
    var float = windowBottom < containerBottom;
    if (this.state.float !== float) {
      this.setState({float});
    }
  }
});

export default FloatingElement;