Epic-infinite-scroll-react NPM

epic-infinite-scroll-react

A simple infinite scroll handler react library.

Install

npm install --save epic-infinite-scroll-react

Usage

import React, { useState } from "react";
import {
  EpicInfiniteScroll,
  EpicInfiniteScrollRef,
} from "epic-infinite-scroll-react";

const App = () => {
  const Ref = React.useRef<EpicInfiniteScrollRef>(null);

  const [Items, setItems] = useState(10);

  return (
    <>
      <div style={{ display: "block", width: "100%", height: "500px" }}>
        <EpicInfiniteScroll
          ref={Ref}
          reverse // Reverse Infinit Scroll
          // Has More Data
          hasMore={Items < 50}
          // Data Loader Callback -- Called every time something changes in the dependency Array.
          loadCallback={() =>
            // Load Data From API
            new Promise<Array<number>>((resolve) =>
              setTimeout(() => {
                const Data = Array(Items).fill(0);

                resolve(Data.map((_, index) => Data.length - index - 1));
              }, 1000)
            )
          }
          // Watch Variables for Changes -- useEffect Dependencies
          dependencies={[Items]}
          // Cleanup -- useEffect Cleanup
          cleanup={() => {
            // Cleanup all Subscriptions if any...
          }}
          // Trigger To Load More Data
          loadMore={() => setItems((items) => items + 10)}
          // Data List Template
          template={(item, index) => (
            <div
              key={index}
              style={{
                width: "100%",
                height: "100px",
              }}
            >
              Content {item}
            </div>
          )}
          // Loading Component
          loadingComponent={<>Loading...</>}
          // Empty Component
          emptyComponent={<>Oops! No Data.</>}
        />
      </div>
    </>
  );
};

export default App;