Registry / web-framework / react-infinite-scroller

react-infinite-scroller

library1.2.6jsnpmunverified

React Infinite Scroller is a lightweight and flexible React component designed to implement infinite scrolling functionality in web applications. It supports both window-based and DOM-element-based scrolling, making it versatile for various layouts. The package is known for not requiring explicit item heights and includes support for 'chat history' or reverse mode scrolling. Currently at version 1.2.6, it demonstrates active maintenance with recent updates for React 18 compatibility. This component provides a simple alternative to more feature-rich (and often heavier) scroll libraries, offering a minimal footprint (approximately 2.2KB minified and gzipped) while being unit-tested and widely adopted in production environments.

web-framework

npm install react-infinite-scroller

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-INFINITE-SCR

react-infinite-scroller

web-frameworkjavascriptv1.2.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

InfiniteScroll

✓ import InfiniteScroll from 'react-infinite-scroller';

✗ const InfiniteScroll = require('react-infinite-scroller');

The primary component is exported as a default export, making direct named imports incorrect.

This example demonstrates how to implement infinite scrolling within a specific DOM element using `getScrollParent` to define the scrollable container and simulates loading more items from an API.

import React, { useState, useEffect } from 'react'; import InfiniteScroll from 'react-infinite-scroller'; const itemsPerPage = 20; let currentItemCount = 0; function App() { const [items, setItems] = useState([]); const [hasMore, setHasMore] = useState(true); const [scrollParentRef, setScrollParentRef] = useState(null); const fetchMoreItems = (page) => { // Simulate API call setTimeout(() => { const newItems = []; for (let i = 0; i < itemsPerPage; i++) { if (currentItemCount < 100) { // Simulate a total of 100 items newItems.push(<div key={currentItemCount}>Item #{currentItemCount}</div>); currentItemCount++; } else { setHasMore(false); break; } } setItems((prevItems) => [...prevItems, ...newItems]); }, 500); }; useEffect(() => { // Initial load happens via pageStart={0} prop console.log('Component mounted or scrollParentRef set'); }, [scrollParentRef]); return ( <div style={{ height: '500px', overflow: 'auto', border: '1px solid #ccc' }} ref={setScrollParentRef}> <h2>Infinite Scroller within a Custom DIV</h2> <InfiniteScroll pageStart={0} loadMore={fetchMoreItems} hasMore={hasMore} loader={<div className="loader" key={0}>Loading more items...</div>} useWindow={false} getScrollParent={() => scrollParentRef} > {items.length > 0 ? items : <div>No items to display yet.</div>} </InfiniteScroll> {!hasMore && <div style={{ textAlign: 'center', padding: '10px' }}>All items loaded!</div>} </div> ); } export default App;

Debug

Known issues

breakingWhen using a custom loader element for the `loader` prop, the top-level component passed to `loader` now requires a unique `key` prop to prevent React warnings and ensure correct rendering.

fix

Ensure your custom loader component has a unique `key` prop, e.g., `<div className="loader" key={0}>Loading ...</div>`.

affects: >=1.1.3

gotchaDouble or non-stop calls to the `loadMore` callback can occur if CSS layout is not correctly configured, particularly if the container height does not correctly encompass all items. The component relies on container height calculations.

fix

Ensure your CSS correctly defines the height of the scrollable container and its children. Verify that the height of the container equals the entire height of its items. Consider adding an internal `isLoading` state to your `loadMore` function to prevent overlapping API calls.

affects: >=1.0.0

gotchaWhen using `getScrollParent` for a custom scrollable element, ensure that the `useWindow` prop is explicitly set to `false` to instruct the component to use the specified parent for scroll calculations instead of the window.

fix

Always include `useWindow={false}` when providing a `getScrollParent` function or a `parent` prop for non-window scrolling.

affects: >=1.2.2

gotchaThe `hasMore` prop must accurately reflect whether there are more items to load. If `hasMore` remains `true` indefinitely when no more items exist, the `loadMore` function may be called unnecessarily, leading to excessive network requests.

fix

Update the `hasMore` prop to `false` in your component's state once all available data has been loaded from your source. This disables further `loadMore` calls and removes event listeners.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of null (reading 'offsetHeight')

The component attempted to access `offsetHeight` on a null or undefined DOM element, often due to race conditions or incorrect element references.

fix

This issue was addressed in `v1.2.1`. Ensure you are on a recent version. If using `getScrollParent`, ensure the ref is consistently available before `InfiniteScroll` attempts to access it.

Vertical scrolling warning that occurred in Google Chrome

A specific browser-related issue affecting vertical scrolling behavior, particularly in Chrome, was identified and fixed.

fix

Update to version `1.2.5` or newer to resolve this Chrome-specific vertical scrolling warning.

When isReverse is true, the scroll bar position is incorrect

A bug caused the scrollbar position to be miscalculated when the `isReverse` prop was set to `true`, commonly used for 'chat history' layouts.

fix

Upgrade to version `1.2.3` or later to fix the incorrect scrollbar positioning when in reverse scrolling mode.

Upgrade

Version history

1.2.6latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React component rendering.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/danbovey/react-infinite-scroller ↗

packagehttps://www.npmjs.com/package/react-infinite-scroller ↗