React Infi Scroller

Installation

To install the component, run:

npm install react-infi-scroller

How to use

To import the component in your project:

import InfiScroller from 'react-infi-scroller';

Use InfiScroller on the window object:

import React, { useState } from 'react';
import InfiScroller from 'react-infi-scroller';

const MyComponent = () => {
  const generateItems = (items = [], length = 30) => {
    const nextItems = [...items];
    for (let i = 0; i < length; i += 1) {
      nextItems.push(items.length + i);
    }
    return nextItems;
  };
  const [items, setItems] = useState(generateItems());
  const [hasMore, setHasMore] = useState(true);

  return (
    <InfiScroller
      hasMore={hasMore}
      onLoadMore={() => {
        const nextItems = generateItems(items);
        setItems(nextItems);
        setHasMore(nextItems.length < 300);
      }}
    >
      <ul>
        {items.map((item) => (
          <li
            key={item}
            style={{ height: 100 }}
          >
            {`Item ${item}`}
          </li>
        ))}
      </ul>
    </InfiScroller>
  );
};

Use InfiScroller on a custom scroll target (like a modal):

import React, { useState, useRef } from 'react';
import InfiScroller from 'react-infi-scroller';

const MyComponent = () => {
  const generateItems = (items = [], length = 30) => {
    const nextItems = [...items];
    for (let i = 0; i < length; i += 1) {
      nextItems.push(items.length + i);
    }
    return nextItems;
  };
  const [items, setItems] = useState(generateItems());
  const [hasMore, setHasMore] = useState(true);
  const refComponent = useRef(null);

  return (
    <div ref={refComponent}>
      <InfiScroller
        scrollTarget={refComponent.current}
        hasMore={hasMore}
        onLoadMore={() => {
          const nextItems = generateItems(items);
          setItems(nextItems);
          setHasMore(nextItems.length < 300);
        }}
      >
        <ul>
          {items.map((item) => (
            <li
              key={item}
              style={{ height: 100 }}
            >
              {`Item ${item}`}
            </li>
          ))}
        </ul>
      </InfiScroller>
    </div>
  );
};

Use multiple InfiScroller components with custom scroll targets:

import React, { useState, useRef } from 'react';
import InfiScroller from 'react-infi-scroller';

const MyComponent = () => {
  const generateItems = (items = [], length = 30) => {
    const nextItems = [...items];
    for (let i = 0; i < length; i += 1) {
      nextItems.push(items.length + i);
    }
    return nextItems;
  };
  const [items, setItems] = useState(generateItems());
  const [hasMore, setHasMore] = useState(true);
  const [otherItems, setOtherItems] = useState(generateItems());
  const [hasMoreOther, setHasMoreOther] = useState(true);
  const refItemsWrapper = useRef(null);
  const refOtherItemsWrapper = useRef(null);
  
  /* Styles for the scroll targets used below
  <style>
    .items-scroller {
      height: 300px;
      overflow: auto;
      background-color: white;
    }

    .other-items-scroller {
      height: 500px;
      margin-top: 40px;
      overflow: auto;
      background-color: white;
    }
  </style>
  */

  return (
    <div>
      <div
        ref={refItemsWrapper}
        className="items-scroller"
      >
          <InfiScroller
            scrollTarget={refItemsWrapper.current}
            hasMore={hasMore}
            onLoadMore={() => {
              const nextItems = generateItems(items);
              setItems(nextItems);
              setHasMore(nextItems.length < 300);
            }}
          >
            <ul>
              {items.map((item) => (
                <li
                  key={item}
                  style={{ height: 100 }}
                >
                  {`Item ${item}`}
                </li>
              ))}
            </ul>
          </InfiScroller>
      </div>

      <div
        ref={refOtherItemsWrapper}
        className="other-items-scroller"
      >
          <InfiScroller
            scrollTarget={refOtherItemsWrapper.current}
            hasMore={hasMoreOther}
            onLoadMore={() => {
              const nextOtherItems = generateItems(otherItems);
              setOtherItems(nextOtherItems);
              setHasMoreOther(nextOtherItems.length < 120);
            }}
          >
            <ul>
              {otherItems.map((otherItem) => (
                <li
                  key={otherItem}
                  style={{ height: 100 }}
                >
                  {`Other Item ${otherItem}`}
                </li>
              ))}
            </ul>
          </InfiScroller>
      </div>
    </div>
  );
};

Use InfiScroller with a spinner/loader:

import React, { useState } from 'react';
import InfiScroller from 'react-infi-scroller';

const MyComponent = () => {
  const generateItems = (items = [], length = 30) => {
    const nextItems = [...items];
    for (let i = 0; i < length; i += 1) {
      nextItems.push(items.length + i);
    }
    return nextItems;
  };
  const [items, setItems] = useState(generateItems());
  const [hasMore, setHasMore] = useState(true);

  return (
    <InfiScroller
      hasMore={hasMore}
      onLoadMore={() => {
        const nextItems = generateItems(items);
        setItems(nextItems);
        setHasMore(nextItems.length < 300);
      }}
    >
      <ul>
        {items.map((item) => (
          <li
            key={item}
            style={{ height: 100 }}
          >
            {`Item ${item}`}
          </li>
        ))}
      </ul>

      {hasMore && (
        <span>Loading...</span>
      )}
    </InfiScroller>
  );
};

Props