{"library":"react-treebeard","title":"React Treebeard: Data-Driven Tree View","description":"React Treebeard is a highly customizable and performant React component for rendering tree structures. It is data-driven, allowing developers to define the tree's structure and state through a simple data object. The current stable version is 3.2.4, released in 2019, with a beta version (4.2.4-beta.0) indicating potential future development, though the stable release cadence has been slow. Key differentiators include its robust animation capabilities, extensive styling options through decorators (leveraging `@emotion/styled`), and its programmatic approach to managing tree state, making it suitable for displaying complex hierarchical data with interactive features like toggling nodes and active states.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-treebeard"],"cli":null},"imports":["import { Treebeard } from 'react-treebeard';","import { decorators } from 'react-treebeard';","import React from 'react';\nimport { Treebeard } from 'react-treebeard';\n\nconst customStyles = { /* ... */ };\n\nconst MyTree = () => (\n  <Treebeard data={/* ... */} style={customStyles} />\n);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Treebeard, decorators } from 'react-treebeard';\n\ninterface Node {\n  id: string;\n  name: string;\n  toggled?: boolean;\n  children?: Node[];\n}\n\nconst initialData: Node = {\n  id: 'root',\n  name: 'root',\n  toggled: true,\n  children: [\n    { id: 'parent1', name: 'Parent 1', children: [{ id: 'child1a', name: 'Child 1A' }, { id: 'child1b', name: 'Child 1B' }] },\n    { id: 'parent2', name: 'Parent 2', toggled: true, children: [{ id: 'child2a', name: 'Child 2A' }] }\n  ]\n};\n\nconst customStyles = {\n  tree: {\n    base: { listStyle: 'none', backgroundColor: '#fdfdfd', margin: 0, padding: 0, color: '#333' },\n    node: {\n      base: { position: 'relative' },\n      link: { cursor: 'pointer', position: 'relative', padding: '0px 5px', display: 'block' },\n      activeLink: { background: '#e0e0e0' },\n      toggle: { base: { position: 'relative', display: 'inline-block', verticalAlign: 'top', marginLeft: '-5px', height: '24px', width: '24px' }, wrapper: { position: 'absolute', top: '50%', left: '50%', margin: '-7px 0 0 -7px', height: '14px', width: '14px' }, height: 14, width: 14, arrow: { fill: '#333', strokeWidth: 0 } },\n      header: { base: { display: 'inline-block', verticalAlign: 'top', color: '#333' }, connector: { width: '2px', height: '12px', borderLeft: 'solid 2px black', borderBottom: 'solid 2px black', position: 'absolute', top: '0px', left: '-21px' }, title: { lineHeight: '24px', verticalAlign: 'middle' } },\n      subtree: { listStyle: 'none', paddingLeft: '19px' },\n      loading: { color: '#E2C089' }\n    }\n  }\n};\n\nconst MyTreeComponent: React.FC = () => {\n  const [treeData, setTreeData] = useState<Node>(initialData);\n\n  const onToggle = (node: Node, toggled: boolean) => {\n    const nextData = { ...treeData };\n    const findAndToggle = (currentNodes: Node[], targetNodeId: string): boolean => {\n      for (const n of currentNodes) {\n        if (n.id === targetNodeId) {\n          n.toggled = toggled;\n          return true;\n        }\n        if (n.children && findAndToggle(n.children, targetNodeId)) {\n          return true;\n        }\n      }\n      return false;\n    };\n\n    if (nextData.id === node.id) {\n      nextData.toggled = toggled;\n    } else if (nextData.children) {\n      findAndToggle(nextData.children, node.id);\n    }\n\n    setTreeData(nextData);\n  };\n\n  return (\n    <Treebeard\n      data={treeData}\n      onToggle={onToggle}\n      decorators={decorators}\n      style={customStyles}\n    />\n  );\n};\n\nexport default MyTreeComponent;","lang":"typescript","description":"Demonstrates a basic interactive tree view with custom styling, default decorators, and state management for node toggling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}