npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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.