{"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,"search_vec":"'2019':50 '3.2.4':47 '4.2.4':55 'activ':106 'allow':27 'anim':74 'approach':86 'beta':53 'beta.0':56 'cadenc':65 'capabl':75 'complex':96 'compon':17 'current':43 'customis':114 'customiz':13 'data':4,25,40,98,112 'data-driven':3,24,111 'decor':80 'defin':30 'develop':28,60 'differenti':70 'display':95 'driven':5,26,113 'emotion/styled':82 'extens':76 'fast':115 'featur':101 'futur':59 'hierarch':97 'high':12 'includ':71 'indic':57 'interact':100 'javascript':108 'key':69 'leverag':81 'like':102 'make':91 'manag':88 'node':104 'object':41 'option':78 'perform':15 'potenti':58 'programmat':85 'react':1,8,16,109 'releas':48,64 'render':19 'robust':73 'simpl':39 'slow':68 'stabl':44,63 'state':36,90,107 'structur':21,34 'style':77 'suitabl':93 'though':61 'toggl':103 'tree':6,20,32,89 'treebeard':2,9 'treeview':110 'version':45,54 'view':7","created_at":"2026-04-21T18:00:02.284196+00:00","updated_at":"2026-04-21T18:00:02.284196+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/storybooks/react-treebeard","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-treebeard","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}