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

| Prop | Type | Description | | ---------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | | className | string | Optional classNames for the container. | | styles | CSSProperties | Inline styles for the container. | | children | ReactNode | Scrollable content. | | debounceDelay | number | Debounce interval in ms for top/bottom events. Default 100. | | hasPrevious | boolean | Indicates if there are items to load above. | | hasNext | boolean | Indicates if there are items to load below. | | loaderToast | ReactNode | Toast displayed briefly after loading. | | toastVisibleDuration | number | Duration in ms to show the toast. Default 1000. | | topLoader | (ratio) => ReactNode | Render function for top loader, with ratio being the interection percentage (0..1), good for render a circular progress | | bottomLoader | (ratio) => ReactNode | Render function for bottom loader, with ratio being the interection percentage (0..1) | | endMessage | ReactNode | Element displayed when there are no more items. | | onTopReached | () => void | Callback for when the top is reached. | | onBottomReached | () => void | Callback for when the bottom is reached. |

License

MIT.