react-window-infinite-scroll-simple v0.0.2

React Window Infinite Scroll

A React component for implementing infinite scrolling using react-window and react-window-infinite-loader. Ideal for scenarios where you need to handle a large list of items with virtualization and infinite loading.

Installation

You can install this package via npm or yarn:

npm install react-window-infinite-scroll-simple

or

yarn add react-window-infinite-scroll-simple

Usage

To use the ReactWindowInfiniteScroll component in your application, follow these steps:

Import the Component:

import { ReactWindowInfiniteScroll } from "./lib";

function App() {
  const dummyList = new Array(40).fill(0).map((_, idx) => ({
    id: idx,
    name: `List ${idx}`,
  }));
  const totalPages = 16; // Total number of pages
  const currentPage = 10; // Current page number

  const infiniteCallback = () => {
    console.log("Loading next page...");
    // Implement the logic to fetch and append new data here
  };

  return (
    <div style={{ width: 300, height: 800, backgroundColor: "#ddd" }}>
      <ReactWindowInfiniteScroll
        totalPage={totalPages}
        currentPage={currentPage}
        itemLength={dummyList.length}
        listHeight={50}
        infiniteCallback={infiniteCallback}
      >
        {({ index, style }) => <div style={style}>{dummyList[index].name}</div>}
      </ReactWindowInfiniteScroll>
    </div>
  );
}

export default App;

props