rrl

react-recycled-list

A React library for efficiently rendering large list with expensive component

Showing:

Popularity

Downloads/wk

10

GitHub Stars

7

Maintenance

Last Commit

4mos ago

Contributors

0

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-recycled-list

A library for rendering large list with expensive component efficiently

NPM JavaScript Style Guide

What is react-recycled-list?

react-recycled-list is a library for rendering large list with expensive components. Like react-window and react-virtualized, react-recycled-list only renders the rows that are visible to the user to improve performance. However react-recycled-list differs in that it keeps the DOM node count constant, meaning it does not ummount your row component when it is scrolled out of the visible window. This results in much better performance compared to traditional windowing libraries.

Install

npm install react-recycled-list

or

yarn add react-recycled-list

Simple usage

import { FixedList } from "react-recycled-list";

function SimpleListDemo() {

  const data = Array(1000).fill(null).map((_, index) => `index ${index}`);

  return <FixedList height={500} rowComponent={Row} data={data} rowHeight={100}/>
}

// Use React.memo or React pure component to prevent unncessary render
const Row = React.memo(function (props) {
  // the data here is the same data that is passed into the FixedList
  const { data, dataIndex, top, height } = props;

  const value = data[dataIndex];
  // Important!, make sure you inline-style your component with the the provided top, height. Also make sure to set your container element to position absolute
  return <div style={{top, height}} className="react-recycled-row">{value}</div>;
})

Examples, usages, and documentation

Visit the documentation to see a full list of simple and advanced examples with code side by side, as well as the detailed documentation for each component.

Running the example app

After cloning the repo, cd into the example forder and run npm start or yarn start. The example is the same app as the documentation.

License

MIT © BotDanny

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