react-window-dynamic-list

Made with the awesome create-react-library

How is this different from react-window?

This library comes to partly solve the case of rendering dynamically sized items with react-window. For more information about the issue please read this thread.

Before you overjoy please read the limitations of this approach down bellow 😪

Demo

👉 check out dynamic list in action

Install

npm install --save react-window-dynamic-list

Usage

Yep. its that simple 😆

The api is the same as VariableSizeList with two small changes.

1. Instead of itemCount you must pass data (read more).
2. We handle itemSize and estimatedItemSize for you 😎

Implementations details

This solution is a really naive one, basically we do the following actions:

1. Render the whole list, without windowing!
2. measure all of the cells and cache the size.
3. Remove the list.
4. Render the virtualized list using the cached sizes.

⚠️ Requirements and Limitations ⚠️

Restrictions:

1. It is feasible and possible (you have all of the data at hand) to load the data at the beginning for a brief time.
2. Your data doesn't change its size
3. You don't add new items to the list (filtering works 😏)
4. Currently this only supports vertical layout. (didn't have time to implement support for horizontal)

Data prop

The data props is expected to be an array of objects where each object contains an id field.

License

MIT © gnir-work