React infinite scrolling How To – react-infinite-scroller
|How to? React infinite scrolling!
React infinite scrolling solution
Infinitely load content using a React Component. This fork maintains a simple, lightweight infinite scroll package that supports both window and scrollable elements.
Setup
npm install react-infinite-scroller --save # or yarn add react-infinite-scroller
import InfiniteScroll from 'react-infinite-scroller';
Window scroll events:
<InfiniteScroll pageStart={0} loadMore={loadFunc} hasMore={true || false} loader={<div className="loader" key={0}>Loading ...</div>} > {items} // <-- This is the content you want to load </InfiniteScroll>
DOM scroll events:
<div style="height:700px;overflow:auto;"> <InfiniteScroll pageStart={0} loadMore={loadFunc} hasMore={true || false} loader={<div className="loader" key={0}>Loading ...</div>} useWindow={false} > {items} </InfiniteScroll> </div>
You can define a custom parentNode element to base the scroll calulations on.
<div style="height:700px;overflow:auto;" ref={(ref) => this.scrollParentRef = ref}> <div> <InfiniteScroll pageStart={0} loadMore={loadFunc} hasMore={true || false} loader={<div className="loader" key={0}>Loading ...</div>} useWindow={false} getScrollParent={() => this.scrollParentRef} > {items} </InfiniteScroll> </div> </div>
License: MIT
Docs & demos
https://cassetterocks.github.io/react-infinite-scroller/
https://cassetterocks.github.io/react-infinite-scroller/demo/
GitHub
https://github.com/CassetteRocks/react-infinite-scroller
See also
How to create Vue JS infinite scroll? Try vue-infinite-loading!
Vue.js scroll to element solutions
How to create Dual Listbox for Vue JS? Meet the dual-listbox-vue component
How to go full screen in JavaScript, jQuery, Vue or React?
Vue.js scroll to element solutions
Tutorial: Implementing Infinite Scroll Into a React Component
Tutorial: Build an Infinite Scroll Component in React using React Hooks
Article Infinite Scroll’ing the right way
Enjoy!