Package Exports

infinite-scrolling-js
infinite-scrolling-js/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (infinite-scrolling-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Infinite Scroll: Seamless Content Loading

Automatically calls next Offset values when we scroll

Install

npm i infinite-scrolling-js

License

MIT

Usage

Infinite Scroll works on a container element , we need to add a useRef hook to the last element so when this element appears it will trigger a callback function if the next offset values are present

const { lastElementRef } = useInfiniteScroll(
    pageNumber,  // current page number which is a useState variable
    setPageNumber, // set current page number 
    hasMore, // boolean value which will be true when there is next offset available
    apiCall, // function to be triggered when scroll to the end 
    records // current offset records which is a useState variable 
  );

{records.map((record, index) => {
        if (records.length === index + 1) {
          return (
            // adding a ref to the last element
            <div ref={lastElementRef} key={record}>  
              {record}
            </div>
          );
        } else {
          return <div key={record}>{record}</div>;
        }
})}

Options

currentPage,
setCurrentPage,
hasMore = false,
callBackAPI,
isLoading = false