DEV Community

Cover image for Another React Virtual Dynamic List
Mike Talbot ⭐
Mike Talbot ⭐

Posted on

5 2

Another React Virtual Dynamic List

Yes, yet another React Virtual List... Why?

Just because, all of the other dynamic lists just didn't perform the way I needed, I bit the bullet and wrote a new one that uses a fancy algorithm for dynamic height items that doesn't need to measure intermediate items and provides some handy helper functions and events.

This component:

  • Provides dynamic item heights
  • Only measures what it draws, estimates the rest and keeps everything smooth by adjusting scroll position when sizes are discovered later
  • Does not need to measure intermediate items when large scrolling, massively improving performance
  • Does not need an accurate estimated item height
  • Allows items to change size at any time
  • Allows natural browser layout of the components on screen within their standard container, no individual item positioning
  • Works in environments that don't constantly fire scroll events (e.g. iOS)

Example
Example of the dynamic list embedded in a Material UI modal, shown with optional scroll indicating holder component, supplied but not required.

This component uses a O(Ln2) algorithm to work out the position of items and caches all of this for maximum performance even when scrolling huge distances.

Provides events that enable any number of items.

MIT Licensed

Available here on GitHub and npm

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️