react-list

library0.8.18jsnpmunverified

ReactList is a versatile React component designed for rendering large, scrollable lists efficiently. It leverages virtualization techniques to render only the visible items, significantly improving performance for long lists. Currently at version 0.8.18, it maintains broad compatibility with React versions from 0.14 through 19. While a 0.x.x version suggests a pre-1.0 stable release, its ongoing compatibility with modern React indicates active maintenance. Key differentiators include support for different item sizing strategies via its `type` prop (uniform, variable, simple), custom item and items renderers, and flexible control over the scroll parent, making it adaptable to various UI layouts and performance needs. It focuses on providing a performant scrolling experience without over-rendering DOM elements.

web-framework

npm install react-list

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-LIST

react-list

web-frameworkjavascriptv0.8.18

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.

ReactList

✓ import ReactList from 'react-list';

✗ import { ReactList } from 'react-list'; const ReactList = require('react-list');

ReactList is exported as a default export. CommonJS `require` is generally not recommended in modern React projects using ESM.

Demonstrates a basic ReactList setup to render 1000 uniform items with a mock data loader, showcasing its infinite scroll capabilities within a fixed-height container.

import React from 'react'; import ReactList from 'react-list'; // Mock data loading function const loadAccounts = (callback) => { setTimeout(() => { const accounts = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Account ${i + 1}` })); callback(accounts); }, 50); }; class MyComponent extends React.Component { state = { accounts: [] }; componentDidMount() { loadAccounts(this.handleAccounts); } handleAccounts = (accounts) => { this.setState({ accounts }); }; renderItem = (index, key) => { const account = this.state.accounts[index]; if (!account) return null; // Handle cases where data might be loading or out of sync return <div key={key} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>{account.name}</div>; }; render() { return ( <div> <h1>Accounts</h1> <div style={{ overflow: 'auto', maxHeight: 400, border: '1px solid #ccc' }}> <ReactList itemRenderer={this.renderItem} length={this.state.accounts.length} type='uniform' threshold={200} /> </div> <p>Showing {this.state.accounts.length} accounts.</p> </div> ); } } // Example of how to use it in a parent component (for demonstration) // function App() { // return <MyComponent />; // } // export default App;

Debug

Known issues

breakingReactList uses a 0.x.x versioning scheme. This implies that breaking changes may occur in minor or even patch releases, so always review changelogs when upgrading.

fix

Consult the GitHub repository's commit history or changelog (if available) for specific breaking changes between versions.

affects: >=0.1.0

gotchaWhen using the `itemsRenderer` prop, it is critical to pass the `ref` prop (received as an argument to `itemsRenderer`) to the root DOM element or component that contains the rendered items. Failure to do so will prevent correct item sizing calculations and lead to rendering issues.

fix

Ensure your custom `itemsRenderer` implementation includes `ref={ref}` on its primary container element, e.g., `<div ref={ref}>{items}</div>`.

affects: >=0.1.0

gotchaThe `itemSizeEstimator` and `itemSizeGetter` props are only utilized when the `type` prop is set to `'variable'`. Misconfiguring these (e.g., providing them with `type='uniform'`) will result in them being ignored and potentially incorrect list behavior.

fix

Set `type='variable'` when you intend to provide custom item size logic via `itemSizeEstimator` or `itemSizeGetter`.

affects: >=0.1.0

deprecatedThe `README` mentions installation via Bower (`bower install react-list`). Bower is a deprecated package manager and should not be used for new projects. NPM or Yarn are the standard.

fix

Always use `npm install react-list` or `yarn add react-list` for installing the package.

affects: <=0.8.18

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'name') at MyComponent.renderItem

The `length` prop for ReactList might be out of sync with the actual data array, or `renderItem` is called with an `index` for which no data exists.

fix

Ensure `this.state.accounts` is properly populated before rendering the list and that `length={this.state.accounts.length}` accurately reflects the current data count. Add a null/undefined check inside `renderItem` for defensive rendering.

ReactList is not scrolling or items are not loading as expected.

The container element for ReactList is missing `overflow: auto` or `overflow: scroll` CSS properties, or the `scrollParentGetter` prop is misconfigured, preventing the list from detecting a scrollable parent.

fix

Ensure the direct parent of `<ReactList />` has a defined height and `overflow: auto` or `overflow: scroll` styles. If a custom scroll parent is used, verify the `scrollParentGetter` correctly returns the scrollable DOM element or `window`.

Items in ReactList have incorrect heights/widths or overlap, especially when their sizes vary.

The `type` prop is set incorrectly (e.g., `'uniform'` for variable-sized items) or `itemSizeGetter` is not provided/incorrectly implemented for `type='variable'`.

fix

For variable-sized items, set `type='variable'` and provide an `itemSizeGetter(index)` function that accurately returns the size of the item at that index. If exact sizes are unknown before rendering, consider `itemSizeEstimator`.

Upgrade

Version history

0.8.18latest on npm

Audit

Dependencies

reactrequiredCore library for ReactList component rendering and lifecycle management.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/caseywebdev/react-list ↗

packagehttps://www.npmjs.com/package/react-list ↗