{"_id":"@codedown/react-treebeard","name":"@codedown/react-treebeard","dist-tags":{"latest":"2.2.0"},"versions":{"2.2.0":{"name":"@codedown/react-treebeard","version":"2.2.0","description":"React Tree View Component","main":"index.js","scripts":{"prepublish":"npm run lib","lib":"npm run babel","babel":"rimraf lib && babel src/ -d lib/","test":"karma start karma.conf.js","test-travis":"karma start --browsers Firefox --single-run","example":"webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js"},"peerDependencies":{"react":"^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0","react-dom":"^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"},"repository":{"type":"git","url":"git+https://github.com/alexcurtis/react-treebeard.git"},"keywords":["react","treeview","data-driven","customisable","fast"],"author":{"name":"Alex Curtis"},"license":"MIT","bugs":{"url":"https://github.com/alexcurtis/react-treebeard/issues"},"homepage":"https://github.com/alexcurtis/react-treebeard#readme","devDependencies":{"babel-cli":"^6.24.1","babel-core":"^6.25.0","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","chai":"^3.4.0","del":"^2.0.2","eslint":"^1.8.0","eslint-loader":"^1.1.0","eslint-plugin-react":"^3.6.3","gulp":"^3.9.0","gulp-babel":"^6.0.0","gulp-eslint":"^1.0.0","gulp-open":"^1.0.0","gulp-util":"^3.0.7","istanbul":"^0.4.5","istanbul-instrumenter-loader":"^0.2.0","karma":"^1.7.0","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.1","karma-firefox-launcher":"^1.0.1","karma-mocha":"^1.3.0","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"^2.0.4","mocha":"^3.4.2","node-libs-browser":"^2.0.0","react":"^15.5.4","react-dom":"^15.5.4","react-hot-loader":"^1.3.0","rimraf":"^2.4.4","sinon":"github:uberVU/Sinon.JS","sinon-chai":"^2.8.0","webpack":"^3.3.0","webpack-dev-server":"^2.5.1"},"dependencies":{"babel-runtime":"^6.23.0","deep-equal":"^1.0.1","prop-types":"^15.5.8","shallowequal":"^0.2.2"},"gitHead":"4e4f62d5675a0736f89e67d000194db969cf48cf","_id":"@codedown/react-treebeard@2.2.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-eQAmZ87lG/2RLp6XM24gRRD5X6MDhfYHjjPgBR2JwahS2UKrM67k2mSYF1q+YAxPXOU3iO4fnYYN4fIZ4vimGw==","shasum":"3ed6a83d6158442832737e7efbce11b1d8a377a0","tarball":"https://registry.npmjs.org/@codedown/react-treebeard/-/react-treebeard-2.2.0.tgz","fileCount":38,"unpackedSize":88559,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrAZ3NQgvRtAQ+kdiPUSykQn1nj1n6EYndqWFGk+RMbAiA9FKLvbtVUOpB7ZmrzeIcWMO3IHYhG0OsJF6gCI9MFfQ=="}]},"_npmUser":{"name":"thomasjm","email":"tom@codedown.io"},"directories":{},"maintainers":[{"name":"thomasjm","email":"tom@codedown.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_2.2.0_1687243064124_0.9989514950499039"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-20T06:37:44.057Z","2.2.0":"2023-06-20T06:37:44.322Z","modified":"2023-06-20T06:37:44.502Z"},"maintainers":[{"name":"thomasjm","email":"tom@codedown.io"}],"description":"React Tree View Component","homepage":"https://github.com/alexcurtis/react-treebeard#readme","keywords":["react","treeview","data-driven","customisable","fast"],"repository":{"type":"git","url":"git+https://github.com/alexcurtis/react-treebeard.git"},"author":{"name":"Alex Curtis"},"bugs":{"url":"https://github.com/alexcurtis/react-treebeard/issues"},"license":"MIT","readme":"# react-treebeard\n\n[![Build Status](https://travis-ci.org/alexcurtis/react-treebeard.svg?branch=master)](https://travis-ci.org/alexcurtis/react-treebeard) [![Coverage Status](https://coveralls.io/repos/alexcurtis/react-treebeard/badge.svg?branch=master&service=github)](https://coveralls.io/github/alexcurtis/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://alexcurtis.github.io/react-treebeard/)\n\nAn online example from the `/example` directory can be found here: [Here](http://alexcurtis.github.io/react-treebeard/)\n\n### Quick Start\n```javascript\n'use strict';\n\nimport React 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 React.Component {\n    constructor(props){\n        super(props);\n        this.state = {};\n        this.onToggle = this.onToggle.bind(this);\n    }\n    onToggle(node, toggled){\n        if(this.state.cursor){this.state.cursor.active = false;}\n        node.active = true;\n        if(node.children){ node.toggled = toggled; }\n        this.setState({ cursor: node });\n    }\n    render(){\n        return (\n            <Treebeard\n                data={data}\n                onToggle={this.onToggle}\n            />\n        );\n    }\n}\n\nconst content = document.getElementById('content');\nReactDOM.render(<TreeExample/>, 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) => {\n        return (\n            <div style={props.style}>\n                loading...\n            </div>\n        );\n    },\n    Toggle: (props) => {\n        return (\n            <div style={props.style}>\n                <svg height={props.height} width={props.width}>\n                    // Vector Toggle Here\n                </svg>\n            </div>\n        );\n    },\n    Header: (props) => {\n        return (\n            <div style={props.style}>\n                {props.node.name}\n            </div>\n        );\n    },\n    Container: (props) => {\n        return (\n            <div onClick={this.props.onClick}>\n                // Hide Toggle When Terminal Here\n                <this.props.decorators.Toggle/>\n                <this.props.decorators.Header/>\n            </div>\n        );\n    }\n};\n\n<Treebeard data={...} decorators={decorators}/>\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","readmeFilename":"README.md"}