import React from 'react' ; import { render } from 'react-dom' ; import InfiniteScroll from '../index' ; const style = { height : 30 , border : '1px solid green' , margin : 6 , padding : 8 , } ; export default class App extends React . Component { state = { items : Array . from ( { length : 20 } ) , hasMore : true , } ; fetchMoreData = ( ) => { if ( this . state . items . length >= 500 ) { this . setState ( { hasMore : false } ) ; return ; } setTimeout ( ( ) => { this . setState ( { items : this . state . items . concat ( Array . from ( { length : 20 } ) ) , } ) ; } , 500 ) ; } ; render ( ) { return ( < div > < h1 > demo : Infinite Scroll with fixed height < /h1> < hr / > < InfiniteScroll dataLength = { this . state . items . length } next = { this . fetchMoreData } hasMore = { this . state . hasMore } loader = { < h4 > Loading ... < /h4>} height={400} endMessage={<p style={{ textAlign: 'center' }}> < b > Yay ! You have seen it all < /b> < /p>}> { this . state . items . map ( ( _ , index ) => ( < div style = { style } key = { index } > div - # { index } < /div>))} < /InfiniteScroll> < /div>); } } render ( < App />, document.getElementById('root'));