@simbathesailor/react-infinite-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.29 • Public • Published

    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
    Anil kumar Chaudhary

    💻 🤔 🎨 📖 🐛

    Install

    npm i @simbathesailor/react-infinite-scroll

    DownloadsWeekly Downloads

    37

    Version

    0.1.29

    License

    MIT

    Unpacked Size

    90.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • anil26