{"id":26690750,"url":"https://github.com/alexcurtis/react-treebeard","last_synced_at":"2025-03-26T16:01:03.715Z","repository":{"id":34995415,"uuid":"43869808","full_name":"storybook-eol/react-treebeard","owner":"storybook-eol","description":"React Tree View Component. Data-Driven, Fast, Efficient and Customisable.","archived":true,"fork":false,"pushed_at":"2022-02-14T19:27:27.000Z","size":1020,"stargazers_count":1687,"open_issues_count":72,"forks_count":295,"subscribers_count":86,"default_branch":"master","last_synced_at":"2025-03-24T20:03:39.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://storybooks.github.io/react-treebeard","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/storybook-eol.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-08T07:23:14.000Z","updated_at":"2025-03-12T03:10:53.000Z","dependencies_parsed_at":"2022-07-30T19:08:04.168Z","dependency_job_id":null,"html_url":"https://github.com/storybook-eol/react-treebeard","commit_stats":null,"previous_names":["storybookjs/react-treebeard","alexcurtis/react-treebeard","storybooks/react-treebeard"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybook-eol%2Freact-treebeard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybook-eol%2Freact-treebeard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybook-eol%2Freact-treebeard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybook-eol%2Freact-treebeard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/storybook-eol","download_url":"https://codeload.github.com/storybook-eol/react-treebeard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689494,"owners_count":20656416,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-26T16:00:28.159Z","updated_at":"2025-03-26T16:01:03.702Z","avatar_url":"https://github.com/storybook-eol.png","language":"JavaScript","readme":"# react-treebeard\n\n[![Build Status](https://travis-ci.org/storybookjs/react-treebeard.svg?branch=master)](https://travis-ci.org/storybookjs/react-treebeard) [![Coverage Status](https://coveralls.io/repos/storybookjs/react-treebeard/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/storybookjs/react-treebeard?branch=master)\n\nReact Tree View Component. Data-Driven, Fast, Efficient and Customisable.\n\n### Install\n\n```\nnpm install react-treebeard --save\n```\n\n### [Example](http://storybookjs.github.io/react-treebeard/)\n\nAn online example from the `/example` directory can be found here: [Here](http://storybookjs.github.io/react-treebeard/)\n\n### Quick Start\n```javascript\nimport React, {PureComponent} from 'react';\nimport ReactDOM from 'react-dom';\nimport {Treebeard} from 'react-treebeard';\n\nconst data = {\n    name: 'root',\n    toggled: true,\n    children: [\n        {\n            name: 'parent',\n            children: [\n                { name: 'child1' },\n                { name: 'child2' }\n            ]\n        },\n        {\n            name: 'loading parent',\n            loading: true,\n            children: []\n        },\n        {\n            name: 'parent',\n            children: [\n                {\n                    name: 'nested parent',\n                    children: [\n                        { name: 'nested child 1' },\n                        { name: 'nested child 2' }\n                    ]\n                }\n            ]\n        }\n    ]\n};\n\nclass TreeExample extends PureComponent {\n    constructor(props){\n        super(props);\n        this.state = {data};\n        this.onToggle = this.onToggle.bind(this);\n    }\n    \n    onToggle(node, toggled){\n        const {cursor, data} = this.state;\n        if (cursor) {\n            this.setState(() =\u003e ({cursor, active: false}));\n        }\n        node.active = true;\n        if (node.children) { \n            node.toggled = toggled; \n        }\n        this.setState(() =\u003e ({cursor: node, data: Object.assign({}, data)}));\n    }\n    \n    render(){\n        const {data} = this.state;\n        return (\n            \u003cTreebeard\n                data={data}\n                onToggle={this.onToggle}\n            /\u003e\n        );\n    }\n}\n\nconst content = document.getElementById('content');\nReactDOM.render(\u003cTreeExample/\u003e, content);\n```\n\nIf you use react-hooks you should do something like this:\n```javascript\nimport React, {useState} from 'react';\nconst TreeExample = () =\u003e {\n    const [data, setData] = useState(data);\n    const [cursor, setCursor] = useState(false);\n    \n    const onToggle = (node, toggled) =\u003e {\n        if (cursor) {\n            cursor.active = false;\n        }\n        node.active = true;\n        if (node.children) {\n            node.toggled = toggled;\n        }\n        setCursor(node);\n        setData(Object.assign({}, data))\n    }\n    \n    return (\n       \u003cTreebeard data={data} onToggle={onToggle}/\u003e\n    )\n}\n\nconst content = document.getElementById('content');\nReactDOM.render(\u003cTreeExample/\u003e, content);\n```\n\n### Prop Values\n\n#### data\n`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired`\n\nData that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in `example/data.js`\n\n#### onToggle\n`PropTypes.func`\n\nCallback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.\n\n#### style\n`PropTypes.object`\n\nSets the treeview styling. Defaults to `src/themes/default`.\n\n#### animations\n`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])`\n\nSets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`.\n\n#### decorators\n`PropTypes.object`\n\nDecorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below:\n\n```javascript\nconst decorators = {\n    Loading: (props) =\u003e {\n        return (\n            \u003cdiv style={props.style}\u003e\n                loading...\n            \u003c/div\u003e\n        );\n    },\n    Toggle: (props) =\u003e {\n        return (\n            \u003cdiv style={props.style}\u003e\n                \u003csvg height={props.height} width={props.width}\u003e\n                    // Vector Toggle Here\n                \u003c/svg\u003e\n            \u003c/div\u003e\n        );\n    },\n    Header: (props) =\u003e {\n        return (\n            \u003cdiv style={props.style}\u003e\n                {props.node.name}\n            \u003c/div\u003e\n        );\n    },\n    Container: (props) =\u003e {\n        return (\n            \u003cdiv onClick={this.props.onClick}\u003e\n                // Hide Toggle When Terminal Here\n                \u003cthis.props.decorators.Toggle/\u003e\n                \u003cthis.props.decorators.Header/\u003e\n            \u003c/div\u003e\n        );\n    }\n};\n\n\u003cTreebeard data={...} decorators={decorators}/\u003e\n```\n\n### Data Attributes\n\n```javascript\n{\n    id: '[optional] string',\n    name: 'string',\n    children: '[optional] array',\n    toggled: '[optional] boolean',\n    active: '[optional] boolean',\n    loading: '[optional] boolean',\n    decorators: '[optional] object',\n    animations: '[optional] object'\n},\n```\n#### id\nThe component key. If not defined, an auto-generated index is used.\n\n#### name\nThe name prop passed into the Header component.\n\n#### children\nThe children attached to the node. This value populates the subtree at the specific node. Each child is built from the same basic data structure. Tip: Make this an empty array, if you want to asynchronously load a potential parent.\n\n#### toggled\nToggled flag. Sets the visibility of a node's children. It also sets the state for the toggle decorator.\n\n#### active\nActive flag. If active, the node will be highlighted. The highlight is derived from the `node.activeLink` style object in the theme.\n\n#### loading\nLoading flag. It will populate the treeview with the loading component. Useful when asynchronously pulling the data into the treeview.\n\n#### decorators / animations\nAttach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above.\n","funding_links":[],"categories":["Uncategorized","UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Uncategorized","Tree"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcurtis%2Freact-treebeard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexcurtis%2Freact-treebeard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcurtis%2Freact-treebeard/lists"}