react-infinite-scroll
Version:
React Infinite Scroll =====================
49 lines • 1.24 kB
HTML
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
<script src="../dist/react-infinite-scroll.min.js"></script>
<style>
.samplePage {
font-size: 36px;
line-height: 96px;
}
</style>
</head>
<body>
</body>
<script>
function createDiv(page) {
return React.DOM.div({
className: 'samplePage'
}, 'Hello page ' + page + ' !');
}
var Wrapper = React.createClass({
getInitialState: function () {
return {
hasMore: true,
items: [createDiv(0)]
};
},
loadMore: function (page) {
console.log('load');
setTimeout(function () {
this.setState({
items: this.state.items.concat([createDiv(page)]),
hasMore: (page < 15)
});
}.bind(this), 1000);
},
render: function () {
console.log('render');
return React.addons.InfiniteScroll({
loader: React.DOM.div({
className: 'loader'
}, 'Loading...'),
loadMore: this.loadMore,
hasMore: this.state.hasMore
}, React.DOM.div.apply(null, [null].concat(this.state.items)));
}
});
React.renderComponent(Wrapper(), document.body);
</script>
</html >