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 😆

API

The api is the same as VariableSizeList with some small changes and additions.

Changes

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

Additions

Property	Type	Required?	Default	Description
data	Object[]	✓		All of the data that will be displayed in the list. Each `object` must contain an unique `id` field. For example: `[{id: 1, ...}, {id: 2, ....}`]
cache	Object	✓		The cache object which the list will use for caching the calculated sizes. Check the example for how to create it.
lazyMeasurement	boolean		`true`	Wether the application should fill the cache in the background. For more information read the caching section.
recalculateItemsOnResize	Object		`{ width: true, height: true }`	Wether the list should recalculate the items size if its own size has changed. This value should not change from its initial one.

Implementations details

TL;DR:

Just in time measurement with caching in the background.

Details:

The algorithm is divided into two main concepts:

Just in time measurements:

We measure each item in the list by temporary rendering it with react-dom in a different application.
For more information please read this great article.

Caching:

In order for just in time measurements to be effective we need to cache the measurements.
Currently there are two caching modes:

Cache only the items that were rendered
On top of caching the rendered items a background task will measure each element and fill the cache.
This is the default behavior as it gives a significant performance boost, especially in case of manipulating the data before scrolling through it.
In exchange there is a mild slow down in overall performance in the first couple of seconds.

⚠️ Requirements and Limitations ⚠️

Your data doesn't change its size.
- Your items size must be determined on mount (No ajax or images).
Currently only supports vertical layout. (didn't have time to implement support for horizontal)
All of the styling regarding the items must be inline or not affected by location in the DOM.
Changes to the list's scrollbar, especially the width, should effect all of the scrollbars in the application.
- Since we pre render the items in order to measure them the size of the scrollbar is important in the pre rendered item as well.