A React component for displaying large nested lists. Implements lightweight DOM updates on scroll, and lazy-loading nested list data.
This video shows the demo included in the demo
directory:
This is the same demo with the DOMViz Chrome extension enabled, highlighting DOM mutations:
The mutation highlights show that DOM nodes (list items) are added as they enter the view. A node enters the view when scrolled to, or when its parent node is expanded.
npm install lazytree-react
(See the demo
directory for a complete example.)
Do a require
on the JSX file:
var LazyTree = require('lazytree.jsx');
Initialize the LazyTree component with the loadChildren
, nodeHeight
, and 'rootElement
props:
var root = $("#root")[0];
<LazyTree
loadChildren={loadChildren}
nodeHeight={30}
rootElement={root}
/>
The props are as follows:
loadChildren
: callback to load child nodes (seedemo/demo.jsx
for full callback docs)nodeHeight
: height of all nodes (in px)rootElement
: element to mountLazyTree
component into
LazyTree allows efficient exploration of large, deeply nested lists.
Internally, LazyTree acts as a parent component for a nested list of LazyNode components:
- LazyTree
- LazyNode 1
- LazyNode 2
- LazyNode 2,1
- LazyNode 2,2
- ...
- LazyNode 3
- ...
- LazyNode N
Here:
LazyTree
is the top-level parent componentLazyNode 2
is the parent ofLazyNode 2,1
andLazyNode 2,2
LazyNode 1
is a sibling ofLazyNode 2
The top-level LazyTree component maintains an internal data structure representing the tree state, where a given node is ...
- expanded (children deployed) or collapsed (children not deployed)
- deployed (parent expanded) or not deployed (parent collapsed)
- visible or occluded (UI state)
Each LazyNode component uses callbacks passed down from LazyTree to query the tree state to determine ...
- should I be rendered? (ie am I currently visible?)
- should my children be rendered? (ie am I currently expanded?)
- which of my children should be rendered? (ie which children are visible?)
The process for determining which children should be rendered is:
- binary search for visible children
- find first visible child
- find first occluded child below it
LazyTree achieves efficiency via lightweight DOM updates and lazy-loading nested list data.
The internal data structure representing the tree state maintains the state of each node in the UI:
- occluded
- expanded
A LazyNode's children are searched to find the ones that are currently visible, and only then added to the virtual DOM for rendering.
The loadChildren
callback provided to LazyTree is used to lazy-load child
node labels for the given parent node.
On the TODO list is lazy-loading sibling data on scroll (paging).
Apache 2.0
- Implement lazy-loading scroll with
loadSiblings
callback (could use Waypoint) - Fix scrollbar so it shows full size of list