2.0.4 • Published 8 years ago
react-limited-infinite-scroll v2.0.4
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)
Installation
npm install react-limited-infinite-scroll --save-devUsage
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-devor install v1.x.x
npm install react-limited-infinite-scroll@~1.0.0 --save-dev