Ranjith10 / react-virtualized

React windowing explored. Integrated react-select with react-window for large lists.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-virtualized

What is windowing?

  • Windowing or List virtualization is a concept of only rendering or write the visible portion in the current “ window ” to the DOM.
  • The number of items that rendered at first time are smaller than the original one.
  • The remaining items are rendered when you scroll down to it. The DOM nodes of items that exit the window are replaced by the new ones.

    Why windowing is needed?

  • Without windowing, the entire list is written to the DOM including items that are not in the current window.
  • It means, you would have to wait until the entire list is written to see the first item.
  • This improves the performance of rendering a large list.

    How to run the application?

    npm install
    npm start

    Libraries Used

  • react-virtualized
  • react-window
  • react-virtualized-select
  • react-select
  • About

    React windowing explored. Integrated react-select with react-window for large lists.

    License:MIT License


    Languages

    Language:CSS 38.3%Language:HTML 37.9%Language:JavaScript 23.8%