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!