@playableprints/lothlorien-react
v0.2.7
Published
`lothlorien-react` exports components and hooks to utilize trees from `lothlorien` within react.
Downloads
7
Readme
lothlorien-react
exports components and hooks to utilize trees from lothlorien
within react.
Getting Started
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.
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.
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.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.