Made with the awesome create-react-library
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 ๐ช
๐ check out dynamic list in action
โ๏ธ Play with the demo in sandbox
npm install --save react-window-dynamic-list
Yep. its that simple ๐
The API is the same as VariableSizeList with some small changes and additions.
- Instead of
itemCount
you must passdata
(read more) - We handle
itemSize
andestimatedItemSize
for you ๐
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 |
Whether the application should fill the cache in the background. For more information read the caching section. |
|
recalculateItemsOnResize | Object |
{ width: false, height: false } |
Whether the list should recalculate the items size if its own size has changed. This value should not change from its initial one. Currently the feature is supported but far from perfect, therefore it is disabled by default. |
|
measurementContainerElement | Function |
({style, children}) => ReactNode |
A custom container element in which the elements will be rendered for measuring. Especially useful for changing the scrollbar width. You must pass the style prop to your element. |
|
debug | boolean |
false |
Whether the measurement layer should be visible, useful for debugging a custom measurementContainerElement |
Just in time measurement with caching in the background.
The algorithm is divided into two main concepts:
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.
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.
-
Your data doesn't change its size.
- Your items size must be determined on mount (No
ajax
or images).
- Your items size must be determined on mount (No
-
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 theDOM
. -
Changes to the list's scrollbar, especially the width, should also effect the measurement container div.
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. This can be achieved in the following ways:- Make sure all of the scrollbars in the application are styled the same
- Pass a custom measurement container element via the
measurementContainerElement
prop.
MIT ยฉ gnir-work