React Infinite Scroll Loading
Infinite scroll component for React.
Installation and Usage
$ npm i react-infinite-scroll-loading -S# or $ yarn add react-infinite-scroll-loading
// for commonjsconst InfiniteScrollLoading = ; // for es modules;
Getting Started
Window scroll events
<InfiniteScrollLoading pageStart=1 hasMore=hasMore && !isLoading loadMore=loadMore resetPage=resetPage> !!itemslength && items isLoading && <div>Loading...</div></InfiniteScrollLoading>
DOM scroll events
; const Wrapper = ` height: 660px; overflow: auto;`; <Wrapper> <InfiniteScrollLoading pageStart=1 hasMore=hasMore && !isLoading loadMore=loadMore resetPage=resetPage useWindow=false > !!itemslength && items isLoading && <div>Loading...</div> </InfiniteScrollLoading></Wrapper>
Custom parent element
; const Wrapper = ` height: 660px; overflow: auto;`; const wrapperRef = ; <Wrapper ref=wrapperRef> <article> <InfiniteScrollLoading pageStart=1 hasMore=hasMore && !isLoading loadMore=loadMore resetPage=resetPage useWindow=false getScrollParent= wrapperRef > !!itemslength && items isLoading && <div>Loading...</div> </InfiniteScrollLoading> </article> <aside>...</aside></Wrapper>
API
Name | Type | Default | Description |
---|---|---|---|
element |
React.Node |
div |
Name of the element that the component should render as. |
pageStart |
number |
0 |
The number of the first page to load, With the default of 0 , the first page is 1 . |
hasMore |
boolean |
false |
Whether there are more items to be loaded. Event listeners are removed if false . |
loadMore |
loadMore(page: number): void |
null |
A callback when more items are requested by the user. |
resetPage |
boolean |
false |
Whether the component should reset the page start number. |
threshold |
number |
250 |
The distance in pixels before the end of the items that will trigger a call to loadMore . |
useWindow |
boolean |
false |
Add scroll listeners to the window, or else, the component's parentNode . |
getScrollParent |
getScrollParent(): React.Node |
null |
Override method to return a different scroll listener if it's not the immediate parent of InfiniteScrollLoading. |
useCapture |
boolean |
false |
Proxy to the useCapture option of the added event listeners. |