react-chatview hello-world

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://rawgit.com/lodash/lodash/3.10.1/lodash.js"></script>
<script src="//cdn.jsdelivr.net/bluebird/3.1.1/bluebird.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://raw.githubusercontent.com/dustingetz/react-chatview/master/dist/react-chatview.js"></script>

<div id="root"/>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
.content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}

JavaScript 1.7

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = { messages: _.range(50).map(v => 'hi') };
  }
  
  render () {
    return <div>
      <div className="header"/>
      <ReactChatView 
          className="content"
          flipped={true}
          scrollLoadThreshold={50}
          onInfiniteLoad={this.loadMoreHistory.bind(this)}>
        {this.state.messages.map((v, ix) => <div key={ix}>{`${ix}: ${v}`}</div>)}
      </ReactChatView>
      <div className="footer"><br/>Try scrolling to the top, and resizing the window.</div>
    </div>;
  }
  
  loadMoreHistory () {
    return new Promise((resolve, reject) => {
      let more = _.range(20).map(v=>'yo');
      this.setState({ messages: this.state.messages.concat(more)});
      resolve();
    });
  }
}

ReactDOM.render(<App />, document.getElementById('root'));