React infinite scrolling How To – react-infinite-scroller

DirectCode | February 13, 2020 | Data, Effects, es6, Forms, Frameworks, HTML5, React JS | No Comments

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