JSPM – react-limited-infinite-scroll@2.0.4

Package Exports

react-limited-infinite-scroll

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-limited-infinite-scroll) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

中文 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