npmpackage.info

Gathering detailed insights and metrics for react-window-dynamic-list

Other packages similar to react-window-dynamic-list

react-viewport-list

7.1.2

📜 Virtualization for lists with dynamic item size

react-window-dynamic-size-list

1.0.1

Dynamically measured cells for React Window

react-dynamic-window

1.0.7

A React library for efficiently rendering large scrollable lists with dynamic heights

virtualize-it

1.1.2

This project provides virtualized list and grid components for efficient rendering of large datasets.

react-window-dynamic-list

A naive approach to virtualizing a dynamically sized list

2.4.2

JavaScript

5.16 kB

121,829 1.3

Installations

npm install react-window-dynamic-list

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=10

Node Version

10.19.0

NPM Version

6.14.4 Pull Requests

Open

14

Total

34

Closed

6

Merged

14

Issues

Open

1

Total

15

Closed

14

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 5 contributors

Languages

JavaScript

HTML

CSS

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

Last Week

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

Bundlephobia

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

NPM Version

6.14.4

Node Version

10.19.0

Total Downloads

Cumulative downloads

Total Downloads

121,829

Last day

Compared to previous day

Last week

-97.8%

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

Versions

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

Usage Preview

Yep. its that simple :satisfied:

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 :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 call resetAfterIndex function of VariableSizeList.

:warning: Requirements and Limitations :warning:

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 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:
1. Make sure all of the scrollbars in the application are styled the same
2. Pass a custom measurement container element via the measurementContainerElement prop.

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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 More

Other packages similar to react-window-dynamic-list

react-window-dynamic-list

Installations

Developer Guide

Yes

CommonJS

>=10

10.19.0

6.14.4

Pull Requests

14

34

6

14

Issues

1

15

14

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

gnir-work

Download Statistics

GitHub Statistics

Bundle Size

14.80 kB

5.16 kB

Maintainers

Package Meta Information

Total Downloads

121,829

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-window-dynamic-list

How is this different from react-window?

Demo

Install

Usage

API

Changes

Additions

Implementations details

TL;DR:

Details:

Just in time measurements:

Caching:

:warning: Requirements and Limitations :warning:

License

10

0

0

0

0

0

0

0

0

0

1.3

/10

How is this different from `react-window`?