JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.container {
  height: 300px;
  overflow-y: scroll;
  background-color: #eee;
}

JavaScript 1.7

/** @jsx React.DOM */
var SimpleLog = React.createClass({    
  getInitialState: function() {
    return { items: [] };
  },

  addEvent: function() {
    this.setState({items: this.state.items.concat(['Event ' + Math.random()])});
  },

  componentWillUpdate: function() {
    var node = this.getDOMNode();
    this.shouldScrollBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
  },

  componentDidUpdate: function() {
    if (this.shouldScrollBottom) {
      var node = this.getDOMNode();
      node.scrollTop = node.scrollHeight
    }
  },

  componentDidMount: function() {
    setInterval(this.addEvent, 300);
  },

  render: function() {
return <div class="container"><ul>{this.state.items.map(function(i) { return <li>{i}</li>})}</ul></div>;
  }
});


React.renderComponent(<SimpleLog />, document.body);