JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<!--
  We add elements at the bottom. If you are at the bottom of the screen, it's going to stay docked there. Otherwise it's going to keep the current position
-->

CSS

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

Babel + JSX

/** @jsx React.DOM */
var SimpleLog = React.createClass({    
  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
    }
  },

  getInitialState: function() {
    return { items: [] };
  },

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

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

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


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