Installations
npm install react-window-dynamic-listDeveloper Guide
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=10
Node Version
10.19.0
NPM Version
6.14.4
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (85.8%)
HTML (10.08%)
CSS (4.12%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
gnir-work
Download Statistics
Total Downloads
121,829
Last Day
7
Last Week
7
Last Month
1,574
Last Year
31,205
GitHub Statistics
49 Stars
120 Commits
9 Forks
3 Watching
28 Branches
5 Contributors
Bundle Size
14.80 kB
Minified
5.16 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
2.4.2
Package Id
react-window-dynamic-list@2.4.2
Unpacked Size
53.88 kB
Size
11.28 kB
File Count
7
NPM Version
6.14.4
Node Version
10.19.0
Total Downloads
Cumulative downloads
Total Downloads
121,829
Last day
0%
7
Compared to previous day
Last week
-97.8%
7
Compared to previous week
Last month
-26.3%
1,574
Compared to previous month
Last year
-0.4%
31,205
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Dev Dependencies
20
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 :sleepy:
Demo
👉 check out dynamic list in action
:pencil2: Play with the demo in sandbox
Install
1npm install --save react-window-dynamic-list
Usage
Yep. its that simple :satisfied:
API
The API is the same as VariableSizeList with some small changes and additions.
Changes
- Instead of
itemCountyou must passdata(read more) - We handle
itemSizeandestimatedItemSizefor you :sunglasses:
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 | Whether the application should fill the cache in the background. Please note: After each cache clear the application will restart the lazy cache filling (For example after adding or removing an item) 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 |
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 very mild slow down in overall performance in the first couple of seconds and after each change to the size of the list.
:warning: Please note: the lazy cache filling will be triggered in case you callresetAfterIndexfunction ofVariableSizeList.
:warning: Requirements and Limitations :warning:
-
Your data doesn't change its size.
- Your items size must be determined on mount (No
ajaxor 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
inlineor 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
measurementContainerElementprop.
License
MIT © gnir-work
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 1/13 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
100 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.3
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-window-dynamic-list
react-viewport-list
📜 Virtualization for lists with dynamic item size
react-window-dynamic-size-list
Dynamically measured cells for React Window
react-dynamic-window
A React library for efficiently rendering large scrollable lists with dynamic heights
virtualize-it
This project provides virtualized list and grid components for efficient rendering of large datasets.