@simbathesailor/react-infinite-scroll

react-infinite-scroll 📜

A dead simple React infinite-scroll

✅ Built on new flashy Reactjs hooks.

✅ No assumption on the how you bring data, just wrap the content inside the InfiniteScroll component

✅ Uses Intersection Observer API, hence performant than regular ways of doing it

✅ Completely configurable. Can be used to trigger infinite scroll in any direction.

✅ Takes care of screen resizing

✅ Tiny (1.4kb gzipped)

Installing

If using npm:

npm i @simbathesailor/react-infinite-scroll --save

If using yarn:

yarn add @simbathesailor/react-infinite-scroll

Demo

Demo App

Full Codesandbox Code

Usage

Scenario: When need to fetch new set of data when scroll end is reached

import { InfiniteScroll } from '@simbathesailor/react-infinite-scroll';

function App() {
  // setting up the active page fetched, It can be any logic needed

  const [activePageInfo, setActivePageInfo] = React.useState(1);

  // This is data recieved till now, which will be rendered.

  const [dataInfiniteScroll, setDataInfiniteScroll] = React.useState(null);

  // Logic to execute to get the initial set of results

  // On mount of the component , we are making an API call to get

  // the initial set of results.

  React.useEffect(() => {
    fetch(
      `https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=1&limit=10`
    )
      .then(res => {
        return res.json();
      })

      .then(data => {
        setDataInfiniteScroll(data);
      });
  }, []);

  // Logic to execute when the reached the end of the scroll

  // This is a callback which can be passed to InfiniteScroll component, The callback

  // will recieve the isVisible value as true when we reach the end of the scroll.

  const callbackForInfiniteScroll = React.useCallback(
    isVisible => {
      let activePage;

      setActivePageInfo(c => {
        activePage = c;

        return c;
      });

      if (isVisible) {
        fetch(
          `https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=${activePage +
            1}&limit=10`
        )
          .then(res => {
            return res.json();
          })

          .then(data => {
            setDataInfiniteScroll(dataInState => [...dataInState, ...data]);

            setActivePageInfo(c => c + 1);
          });
      }
    },

    [setActivePageInfo]
  );

  return (
    <div className="App">
      {/* Just need to pass the callback to invoke, when list reaches end */}

      <InfiniteScroll callback={callbackForInfiniteScroll}>
        {dataInfiniteScroll &&
          dataInfiniteScroll.map(elem => {
            /** Box is not a React element. It's a React component **/

            return <Box key={elem.id} {...elem} />;
          })}
      </InfiniteScroll>
    </div>
  );
}

// It is important to use forwardRef when Components are not React Elements.

// InfiniteScroll component takes the responsibility of initiliazing

// the intersection observer for you. ref should resolve to a DOM element

const Box = React.forwardRef((props, ref) => {
  const { avatar, id, name } = props;

  return (
    <div ref={ref} className="box-item">
      <img
        style={{ height: '60%', width: '60%', marginBottom: '10px' }}
        src={avatar}
        alt="no-avatar"
      />

      <span>{name}</span>
    </div>
  );
});

Scenario: When need to fetch new set of data with some offset at bottom of the page.

Let' see only the changed code from above. Infinite scroll takes rootMargin as one of the option similar to intersection observer API. Hence any offset can be given as:

rootMargin: "[topOffset], [rightOffset], [bottomOffset], [leftOffset]". Let's see the one of the example having a bottom offset of 680px.

<div className="App">
  <h1>Scroll to see Infinite scroll in action</h1>

  {/* Just need to pass the callback to invoke, when list reaches end */}

  <InfiniteScroll
    callback={callbackForInfiniteScroll}
    options={{
      rootMargin: `0px 0px 680px 0px`,
    }}
  >
    {dataInfiniteScroll &&
      dataInfiniteScroll.map(elem => {
        return <Box key={elem.id} {...elem} />;
      })}
  </InfiniteScroll>
</div>

We can also give , top offset, left offset and right offset. So Infinite scroll can be done in any direction. This also support infinite scrolls in scrollable areas apart from viewport. *Need to test more on that.

Props

Props	IsMandatory	Type	Default	Description
callback	Yes	(isVisibile) => { // Logic to trigger // next set of data }		A callback from consumer, which gets isVisible boolean as the argument.
options	No	object	{ rootMargin: '0px 0px 0px 0px' threshold: '0, 1' when: true visibilityCondition: Function }	These are the almost same options, which we pass to intersectionObserver except threshold which is changed to string type. Done for avoiding extra check for array comparison.
whenInfiniteScroll	No	boolean	true	The flag which can be used to stop infinitescroll behaviour, when false. can be used to off when , data is no more to be fetched.
LoadMoreComponent	No	React.ReactElement	Loading More...	This is a ReactElement or React Component which is shown when scroll reaches end

Concept

react-infinite-scroll is using Intersection Observer API. Hence very performant and slick. We can pass almost same options we pass for setting up intersection observer. Here is the link for MDN Intersection observer. You can read about it and understand why it is performant.

The InfiniteScroll Component make use of useInfiniteScroll and useIntersectionObserver hook. React version above >16.8.6 can use this component for infinite scrolling.

Plan is to bundle useIntersectionObserver as a separate package later.

Work to do

• TestCases.

• Other examples

• Update readme with all the props InfiniteScroll component takes as a table.

• Example how to stop the infinite scroll and sending the custom components as Loader.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

simbathesailor

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors

Thanks goes to these wonderful people (emoji key):

Anil kumar Chaudhary 💻 🤔 🎨 📖 🐛