React Base Fiddle (JSX + harmony)

Starting point for creating JSFiddles with React. This uses React with Addons and enable harmony option .

HTML

<script src="http://fb.me/JSXTransformer-0.13.0-rc1.js"></script>
<script src="http://fb.me/react-with-addons-0.13.0-rc1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

.-items {
  display: flex;
  overflow: hidden;
  border: 1px solid blue;
  height: 40px;
  width: 100px;
}

.-additionalItemsCounter {
  flex: 1 0 auto;
  color: #fff;
  margin: 0 5px;
  height 30px;
  width: 20px;
}

.-item {
  flex: 1 0 auto;
  color: #fff;
  margin: 0 5px;
  height 30px;
  width: 20px;
}

JavaScript 1.7

var ITEM_WIDTH = 20;
class WindowResize extends React.Component {
    constructor (props) {
    	super(props);
      this._handleWindowResize = _.debounce(this._handleWindowResize.bind(this), 100);
      this.state = {
      	containerWidth: 100
      };
    }
    
    componentDidMount () {
		      console.log('hello');
	    window.addEventListener('resize', this._handleWindowResize);
    }
    
    componentDidUnmount () {
    	window.removeEventListener('resize', this._handleWindowResize);
    }
    
    _handleWindowResize () {
    	this.setState({
      	containerWidth: React.findDOMNode(this._containerTarget).offsetWidth
      });
    }
    
    _truncateItems (items) {
    	var containerWidth = this.state.containerWidth;
      var maxItemsToShow = Math.floor(containerWidth / ITEM_SIZE);
      
      if (items.length <= maxItemsToShow || maxItemsToShow < 1) {
      	return items;
      }
      
      // The item displaying the number of remaining items has to also count itself so its +1
      var numberOfCountingItems = 1;
      var numberOfRemainingItems = items.length - maxItemsToShow + numberOfCountingItems;
      var truncatedItems = items.slice(0, maxItemsToShow - numberOfCountingItems);
      var displayNumberHtml = (
      	<div className='-additionalItemsCounter' key='additionalItemsCounter'>
        	<span>+{numberOfRemainingItems}</span>
        </div>
      );
      
      truncatedItems.push(displayNumberHtml);
      console.log('hello');
      return truncatedItems;
    }
    
    render() {
    		var items = _.range(1, 6).map(index => {
        	return (
          	<div className='-item'>
            	{index}
            </div>
          );
        })
        return (
        	<div 
          	className='-items'
            ref={node => {
              // this callback executes before componentDidMount
            	if (node !== null) {
              	this._containerTarget = node;
              }
            }}
           >
         ...