中文 README

Limited Infinite Scroll

React infinite scroll loader component, mannual loader will replace auto-loader when the page reach the limit(Because some users do not like infinite loading all pages, maybe they just want to see the footer)

Demo

Installation

npm install react-limited-infinite-scroll --save-dev

Usage

import LimitedInfiniteScroll from 'react-limited-infinite-scroll'

const { total, list } = this.props.data

const items = list.map((item, index) => {
    return (
        <div key={index}>
            <div>item content</div>
        </div>
    )
})

<LimitedInfiniteScroll 
    limit={5} 
    hasMore={total === undefined || items.length < total}
    spinLoader={<div className="loader">Loading...</div>}
    mannualLoader={<span style={{fontSize: 20, lineHeight: 1.5, marginTop: 20, marginBottom: 20, display: 'inline-block'}}>Load More</span>}
    noMore={<div className="loader">No More Items</div>} 
    loadNext={this.loadNextFunc}>
    {items}
</LimitedInfiniteScroll>

Props

| Name | Type | Default | Description| |:---- |:---- |:---- |:----| | limit | Number | 10 | a load more button will replace auto-loader when pages reach the limit| | pageStart | Number | 0 | start page number| | threshold | Number | 200 | The distance in pixels before the end of the items that will trigger a call to loadNext| | hasMore | Boolean | false | Whether there are more items to be loaded| | autoLoad | Boolean | true | Whether the component should load the first set of items| | useWindow | Boolean | true | Add scroll listeners to the window, or else, the component's parentNode| | loadNext | Function | | A callback for loading next set of items| | spinLoader | Element | | auto loading indicator| | mannualLoader | Element | | mannual load-more button| | noMore | Element | null | indicator for no more items|

Others

For React 15.5+ users, install v2.x.x

npm install react-limited-infinite-scroll --save-dev

or install v1.x.x

npm install react-limited-infinite-scroll@~1.0.0 --save-dev