{"library":"react-vtree","title":"react-vtree","description":"A lightweight React component for efficiently rendering large tree structures (millions of nodes) built on top of react-window. Current stable version is v3.0.0 (released 2023), which requires React 18+. Release cadence is irregular; v3.0.0 consolidated changes from a long beta, with v4.0.0 planned. Key differentiators: uses a generator-based treeWalker for flexible tree building, supports both fixed-size and variable-size items, and ships TypeScript definitions. Alternatives like react-virtualized-tree are heavier or less maintained.","language":"javascript","status":"active","last_verified":"Mon Apr 27","install":{"commands":["npm install react-vtree"],"cli":null},"imports":["import { FixedSizeTree } from 'react-vtree'","import { VariableSizeTree } from 'react-vtree'","import Tree from 'react-vtree'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { FixedSizeTree as Tree } from 'react-vtree'\n\nconst treeNodes = [{ id: 'root', name: 'Root', children: [{ id: 'c1', name: 'Child', children: [] }] }]\n\nfunction* treeWalker() {\n  for (const node of treeNodes) {\n    yield { data: { id: node.id, isLeaf: node.children.length === 0, isOpenByDefault: true, name: node.name, nestingLevel: 0 }, nestingLevel: 0, node }\n  }\n  while (true) {\n    const parent = yield\n    for (const child of parent.node.children) {\n      yield { data: { id: child.id, isLeaf: child.children.length === 0, isOpenByDefault: true, name: child.name, nestingLevel: parent.nestingLevel + 1 }, nestingLevel: parent.nestingLevel + 1, node: child }\n    }\n  }\n}\n\nconst Node = ({ data: { name, isLeaf }, isOpen, style, setOpen }) => (\n  <div style={style}>\n    {!isLeaf && <button onClick={() => setOpen(!isOpen)}>{isOpen ? '-' : '+'}</button>}\n    <span>{name}</span>\n  </div>\n)\n\ncreateRoot(document.querySelector('#root')).render(<Tree treeWalker={treeWalker} itemSize={30} height={150} width={300}>{Node}</Tree>)","lang":"typescript","description":"A complete minimal example: defining a tree structure, implementing the treeWalker generator, creating a Node component, and rendering a FixedSizeTree.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}