# lazytree-react

> A React component for displaying large nested lists.

Latest version **1.0.1** (published 2015-11-19) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install lazytree-react
pnpm add lazytree-react
yarn add lazytree-react
bun add lazytree-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2015-11-19 |
| First published | 2015-11-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+5 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Paul-Jean Letourneau |
| Maintainers | rule146 |
| Keywords | react, lazytree, lazynode, lazy-load |

## Links

- npm: https://www.npmjs.com/package/lazytree-react
- Repository: https://github.com/photoshelter/lazytree-react
- Homepage: https://github.com/photoshelter/lazytree-react#readme
- Issues: https://github.com/photoshelter/lazytree-react/issues
- npm.io page: https://npm.io/package/lazytree-react

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^0.13.3
- [jquery](https://npm.io/package/jquery.md) ^2.1.4
- [react-addons](https://npm.io/package/react-addons.md) ^0.9.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2015-11-19
- 1.0.0 — 2015-11-19

## README

# 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:

![LazyTree demo](static/lazytree-demo.gif)

This is the same demo with the [DOMViz](https://github.com/paul-jean/dom-viz) Chrome extension enabled,
highlighting DOM mutations:

![LazyTree demo using the DomViz Chrome extension](static/lazytree-demo-domviz.gif)

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

```bash
npm install lazytree-react
```

## Usage

(See the `demo` directory for a complete example.)

Do a `require` on the JSX file:

```javascript
var LazyTree = require('lazytree.jsx');
```

Initialize the LazyTree component with the `loadChildren`, `nodeHeight`, and '`rootElement` props:

```javascript
var root = $("#root")[0];
<LazyTree
    loadChildren={loadChildren}
    nodeHeight={30}
    rootElement={root}
/>
```

The props are as follows:
- `loadChildren`: callback to load child nodes (see `demo/demo.jsx` for full callback docs)
- `nodeHeight`: height of all nodes (in px)
- `rootElement`: element to mount `LazyTree` 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:

- Lazy**Tree**
  - Lazy**Node** 1
  - LazyNode 2
    - LazyNode 2,1
    - LazyNode 2,2
    - ...
  - LazyNode 3
  - ...
  - LazyNode N

Here:

- `LazyTree` is the top-level parent component
- `LazyNode 2` is the _parent_ of `LazyNode 2,1` and `LazyNode 2,2`
- `LazyNode 1` is a _sibling_ of `LazyNode 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](https://github.com/brigade/react-waypoint))
- Fix scrollbar so it shows full size of list

---
_Source: https://npm.io/package/lazytree-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._