{"id":15795,"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.","status":"maintenance","version":"3.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/storybooks/react-treebeard","tags":["javascript","react","treeview","data-driven","customisable","fast"],"install":[{"cmd":"npm install react-treebeard","lang":"bash","label":"npm"},{"cmd":"yarn add react-treebeard","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-treebeard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Babel helper functions and polyfills.","package":"@babel/runtime","optional":false},{"reason":"Used for styled-components internally for theming and custom styling.","package":"@emotion/styled","optional":false},{"reason":"Runtime type checking for React props. Best practice for component libraries.","package":"prop-types","optional":false},{"reason":"Core React library.","package":"react","optional":false},{"reason":"DOM-specific methods for React.","package":"react-dom","optional":false}],"imports":[{"note":"Treebeard is the primary component for rendering the tree.","wrong":"const Treebeard = require('react-treebeard').Treebeard;","symbol":"Treebeard","correct":"import { Treebeard } from 'react-treebeard';"},{"note":"Commonly used for default styling. Custom decorators can be defined or extended.","wrong":"import decorators from 'react-treebeard/lib/decorators';","symbol":"decorators","correct":"import { decorators } from 'react-treebeard';"},{"note":"Styles are passed as a prop, not directly imported. Example shows common usage pattern.","symbol":"Custom Styles (object)","correct":"import React from 'react';\nimport { Treebeard } from 'react-treebeard';\n\nconst customStyles = { /* ... */ };\n\nconst MyTree = () => (\n  <Treebeard data={/* ... */} style={customStyles} />\n);"}],"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."},"warnings":[{"fix":"Upgrade your project's `react` and `react-dom` packages to version `16.7.0` or higher.","message":"Version 3.2.0 introduced a peer dependency update requiring React version 16.7.0 or greater. Projects using older React versions must upgrade React to use `react-treebeard` v3.2.0+.","severity":"breaking","affected_versions":">=3.2.0"},{"fix":"Ensure `@emotion/styled` is installed in your project (`npm install @emotion/styled`) and is compatible with the version expected by `react-treebeard` (currently `^10.0.10`).","message":"The `react-treebeard` package relies on `@emotion/styled` as a peer dependency for its styling system. If `@emotion/styled` is not installed in your project, or if there is a version mismatch, styling may not apply correctly or runtime errors may occur.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"When updating the `data` prop, create a new object reference (e.g., by deep cloning or using spread syntax with helper functions) and then modify the specific node's `toggled` property, followed by setting the new state.","message":"When handling node toggles with the `onToggle` prop, it's common to mutate the `data` object directly as shown in some older examples. However, for proper React state management and to avoid unexpected re-renders or state inconsistencies, the `data` prop should be updated immutably within your component's state.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your project's `react` and `react-dom` versions meet the `react-treebeard` peer dependency, currently `>=16.7.0` for `v3.2.0+`.","cause":"React version incompatibility with `react-treebeard`'s peer dependency requirements.","error":"Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=..."},{"fix":"Install `@emotion/styled` in your project: `npm install @emotion/styled` or `yarn add @emotion/styled`.","cause":"Missing `@emotion/styled` peer dependency.","error":"Module not found: Error: Can't resolve '@emotion/styled' in 'path/to/node_modules/react-treebeard'"},{"fix":"Ensure the `style` prop is a complete object matching the expected structure (or use the default `decorators` for baseline styling), and `decorators` are passed if you intend to use default visual components.","cause":"Incorrect or incomplete `style` object passed to the `Treebeard` component, or `decorators` not provided.","error":"TypeError: Cannot read properties of undefined (reading 'base')"}],"ecosystem":"npm"}