React Resize Width Mixin

resize-width-mixin.jsx

var Rx = require('rx');
var _ = require('lodash');

var defaultOptions = {
  minWidth: 1050,
  containerRefName: 'container'
};

module.exports = function(options) {
  return {
    getDefaultProps() {
      return _.extend({}, defaultOptions, options);
    },
    setWidth() {
      var container = this.refs[this.props.containerRefName].getDOMNode();
      var width = Math.max(container.clientWidth, this.props.minWidth);
      this.setState({ width });
    },
    componentDidMount() {
      this.setWidth();
      this.resizeSubscription = Rx.Observable.fromEvent(window, 'resize')
        .debounce(250)
        .subscribe(this.setWidth);
    },
    componentWillUnmount() {
      this.resizeSubscription.dispose();
    }
  };
};