# @playableprints/lothlorien-react

> `lothlorien-react` exports components and hooks to utilize trees from `lothlorien` within react.

Latest version **0.3.1** (published 2025-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @playableprints/lothlorien-react
pnpm add @playableprints/lothlorien-react
yarn add @playableprints/lothlorien-react
bun add @playableprints/lothlorien-react
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2025-05-14 |
| First published | 2023-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 61.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | robmayer, pietersartain |

## Links

- npm: https://www.npmjs.com/package/@playableprints/lothlorien-react
- Repository: https://github.com/playableprints/lothlorien
- Homepage: https://playableprints.github.io/lothlorien/index.html
- Issues: https://github.com/playableprints/lothlorien/issues
- npm.io page: https://npm.io/package/@playableprints/lothlorien-react

## Dependencies (1)

- [@playableprints/lothlorien](https://npm.io/package/@playableprints/lothlorien.md) ^0.3.1

## Recent versions

- 0.3.1 (latest) — 2025-05-14
- 0.3.0 — 2025-05-14
- 0.2.7 — 2024-02-28
- 0.2.6 — 2024-02-23
- 0.2.5 — 2024-02-08
- 0.2.4 — 2024-02-04
- 0.2.3 — 2024-02-03
- 0.2.2 — 2024-02-03
- 0.2.1 — 2024-02-03
- 0.2.0 — 2024-02-03
- 0.1.15 — 2024-01-29
- 0.1.14 — 2024-01-28
- 0.1.13 — 2023-12-17
- 0.1.12 — 2023-12-16
- 0.1.11 — 2023-12-16
- … 11 more at https://npm.io/package/@playableprints/lothlorien-react/versions

## README

`lothlorien-react` exports components and hooks to utilize trees from `lothlorien` within react.

# Getting Started

```tsx
import { Tree } from "@playableprints/lothlorien";
import { TreeView, TreeNodeComponentProps, useTree, DepthMarker } from "@playableprints/lothlorien-react";

type MyPayload = {
    name: string;
};

const MyNodeRenderer = ({ nodeKey, childKeys, value }: TreeNodeComponentProps<Tree<MyPayload>>) => {
    const isLeaf = childKeys.length === 0;

    return (
        <>
            <div>
                <DepthMarker nodeKey={nodeKey} />
                <span>{value.name}</span>
            </div>
        </>
    );
};

const App = () => {
    const myTree = useTree<MyPayload>();
    return <TreeView value={myTree} renderer={MyNodeRenderer} />;
};
```

# Tree Folding State

When you want to have nodes be collapsable or foldable, you can make use of your own mechanism, but one is included in `lothlorien-react`

## Basic Use

from within your TreeNodeComponent, implement the `useFoldState` hook. That will let you control and check the current fold state of the node.

```tsx
type Payload = {
    name: string;
};

const MyNodeRenderer: TreeNodeComponent<Tree<Payload>> = (props) => {
    const { isOpen, toggle } = useFoldState(props.nodeKey);
    return (
        <>
            <div>
                <button onClick={toggle}>{isOpen ? "▼" : "▶"}</button>
                {props.value.name}
            </div>
        </>
    );
};
```

you can also utilize the `useFoldControls` to control the fold state of the tree from the outside, usually by specifying the key.

```tsx
const App = () => {
    const tree = useTree<Payload>();
    const controls = useFoldControls();

    return (
        <div>
            <button onClick={() => controls.current.unfoldTo("/some/nested/node")}>Unfold</button>
            <TreeView value={tree} renderer={MyNodeRenderer} foldControls={controls} />
        </div>
    );
};
```

# from v0.2.0 to v0.3.0

## RecursiveTreeView

Another top-level tree renderer. This one does not use virtualization. Instead, to be performant, it will bail out on rendering child nodes as early as possible by checking to see if the current node is folded. If it is, it will never even look up child nodes.

# from v0.1.0 to v0.2.0

## TreeNodeRenderer

TreeNodeRenderers are no longer responsible for rendering their own children. You don't need to (nor can you) render `childNodes` anymore. `childKeys` is now included as a prop to TreeNodeRenderer so that you can identify if the node is a leaf (by way of `childKeys.length`, for example).

## FoldState

The new fold state is outlined above, but tl;dr: you don't need a wrapping component anymore, the tree manages it's own fold state now. There is also now a new prop `onFold` that let's you perform actions when a given node folds or unfolds.

## LazyTreeView

A variant of the already-extant `<TreeView/>`, the Lazy Tree View will render placeholders for off-screen nodes and replace them with the rendered node when it comes on screen.

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