Skip to content
This repository has been archived by the owner on May 5, 2020. It is now read-only.

Simple virtualization technique applied to a react list component

Notifications You must be signed in to change notification settings

OutSystems/react-virtualized-list

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-virtualized-list

Virtualization technique applied to a react list component

Lists tend to grow and have hundreds of DOM elements which can become a problem specially on mobile devices. Using a virtualization technique (or windowing) we can discard the elements that are not visible on the viewport thus improving the performance when scrolling a list with thousands of elements.

List features:

  • Items virtualization (only visible items are rendered)
  • Supports variable items' size (automatic size detection, no need to specify)
  • Supports items' animation
  • Smooth scrolling
  • Introduces extra elements but with minimal impact in css
  • Automatic feature detection: disables automatically when virtualization is not possible

Animation features (CSSTransitionGroup like component included):

  • Supports transitions duration based on CSS (no need to set transition duration in code)
  • Supports transition from/to auto width/height

About

Simple virtualization technique applied to a react list component

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.6%
  • TypeScript 37.2%
  • HTML 1.2%