lazytree-react v1.0.1
LazyTree
A React component for displaying large nested lists. Implements lightweight DOM updates on scroll, and lazy-loading nested list data.
Demo
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.
Installation
npm install lazytree-react
Usage
(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
Description
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
LazyTree component
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)
LazyNode component
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.
Lightweight DOM updates
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.
Lazy-loading child nodes
The loadChildren
callback provided to LazyTree is used to lazy-load child
node labels for the given parent node.
Lazy-loading sibling nodes
On the TODO list is lazy-loading sibling data on scroll (paging).
License
Apache 2.0
TODO:
- Implement lazy-loading scroll with
loadSiblings
callback (could use Waypoint) - Fix scrollbar so it shows full size of list