react-feed

Hook API

const [startIndex, setStartIndex] = useState(0);
const ref = useRef<HTMLDivElement>(null);

const { style } = useFeed(ref, {
  startIndex,
  onReadHeight: (el) => el.offsetHeight,
  onReadScrollTop: () => document.scrollingElement.scrollTop,
  onChangeStartIndex: setStartIndex,
});

<div ref={ref} style={style}>
  {items.slice(startIndex, startIndex + 10).map((item) => (
    <Card key={item.id} />
  ))}
</div>

Component API

const [startIndex, setStartIndex] = useState(0);

<Feed
  startIndex={startIndex}
  onReadHeight={(el) => el.offsetHeight}
  onReadScrollTop={() => document.scrollingElement.scrollTop}
  onChangeStartIndex={setStartIndex}
>
  {items.slice(startIndex, startIndex + 10).map((item) => (
    <Card key={item.id} />
  ))}
</Feed>