@maisonsmd/react-infinite-scroll v0.1.1

InfiniteScroll

A React component for a scrollable container that lazily loads items at the top and bottom when scrolled.

Installation

npm install @maisonsmd/react-infinite-scroll

Basic Usage

See the full example on CodeSandbox.

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

function App() {
  const [items, setItems] = useState<any[]>([/* initial data */]);

  const hasNext = /* boolean indicating more data at bottom */;
  const hasPrevious = /* boolean indicating more data at top */;

  function loadNext() {
    /* fetch or generate items for bottom */
  }

  function loadPrevious() {
    /* fetch or generate items for top */
  }

  return (
    <InfiniteScroll
      hasNext={hasNext}
      hasPrevious={hasPrevious}
      onBottomReached={loadNext}
      onTopReached={loadPrevious}
      loaderToast={<div className="toast">Loading...</div>}
      topLoader={(ratio) => <div style={{ opacity: ratio }}>Loading Top...</div>}
      bottomLoader={(ratio) => <div style={{ opacity: ratio }}>Loading Bottom...</div>}
    >
      {items.map((item, index) => (
        <div key={item.id ?? index}>
          {/* item display */}
        </div>
      ))}
    </InfiniteScroll>
  );
}

export default App;

Props

License

MIT.