Package Exports

react-window-dynamic-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-window-dynamic-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Usage Preview

Yep. its that simple 😆

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

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

Implementations details

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

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

⚠️ Requirements and Limitations ⚠️

Restrictions:

It is feasible and possible (you have all of the data at hand) to load the data at the beginning for a brief time.
Your data doesn't change its size
You don't add new items to the list (filtering works 😏)
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. dataProp