InfinityList

Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports useInfinityList hook for custom implementations.

Import

import { InfinityList } from 'reablocks';
// or hook only
import { useInfinityList } from 'reablocks';

InfinityList Props

Basic Usage

<InfinityList>
  {items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</InfinityList>

useInfinityList Hook

For custom rendering and control:

import { useInfinityList } from 'reablocks';

function MyList({ items }) {
  const { data, hasMore, remaining, showNext } = useInfinityList({
    items,
    size: 10,
    threshold: 3
  });

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
      {hasMore && (
        <button onClick={() => showNext()}>
          Show {Math.min(10, remaining)} more
        </button>
      )}
    </div>
  );
}

Hook API

Inputs

Returns