rsl

react-scrollable-list

A scrollable, high-performance list component for React

Showing:

Popularity

Downloads/wk

280

GitHub Stars

45

Maintenance

Last Commit

3mos ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

React List

Readme

React Scrollable List

npm version

React Scrollable List is a scrollable, high-performance list component for rendering large lists of items with React. It's performance really shines when dealing with lists in excess of a thousand items, and scales well into the millions or more. Due to it only rendering a small slice of the list into the DOM at any time based on the scroll position, it removes most of the speed issues with web browsers and rendering very large amounts of DOM nodes at once.

Demo

jwarning.github.io/react-scrollable-list

The component is generic and renders a simple component comprised of a div wrapper and div containers for each of the elements currently rendered.

To style the elements you can simply refer to the .react-scrollable-list and the .react-scrollable-list-item classes. The list items need to be passed in via props in the following format:

{
  id: 'a unique identifier',
  content: 'the content to display inside the div'
}

The content can alternatively also be another react component.

The component takes up to four props:

  • listItems: an array of items in the format specified above
  • heightOfItem: the CSS height of each item (needs to be the same for each item)
  • maxItemsToRender: an optional number which tells the component how many components before and after the item scrolled to it should pre-render
  • style: an optional style object to add inline styling through JS
<ReactScrollableList
  listItems=[...]
  heightOfItem={30}
  maxItemsToRender={50}
  style={{ color: '#333' }}
/>

Notes

To build a CommonJS version of this file simply run npm run build. A build is already included in the dist folder.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100