{"_id":"@ndelangen/react-treebeard","_rev":"471391","name":"@ndelangen/react-treebeard","description":"React Tree View Component","dist-tags":{"latest":"3.0.1"},"maintainers":[{"name":"ndelangen","email":""}],"time":{"modified":"2021-08-05T08:19:53.000Z","created":"2018-05-24T22:16:43.860Z","3.0.1":"2018-09-07T06:27:59.875Z","3.0.0":"2018-08-31T09:56:33.240Z","2.1.0":"2018-05-24T22:16:43.860Z"},"users":{},"author":{"name":"Alex Curtis"},"repository":{"type":"git","url":"git+https://github.com/alexcurtis/react-treebeard.git"},"versions":{"3.0.1":{"name":"@ndelangen/react-treebeard","version":"3.0.1","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":{"@emotion/styled":"~0.10.5","react":"^15.5.4 || ^16.0.0","react-dom":"^15.5.4 || ^16.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":"^16.4.2","react-dom":"^16.4.2","react-hot-loader":"^4.3.5","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":{"@emotion/core":"~0.13.0","@emotion/styled":"~0.10.5","babel-runtime":"^6.23.0","deep-equal":"^1.0.1","prop-types":"^15.6.2","shallowequal":"^1.1.0","velocity-react":"^1.3.1"},"gitHead":"1cb470a7ad9eddcd98733932e59016c37ae49834","_id":"@ndelangen/react-treebeard@3.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"644f959a7fff26f2f3e4753c6804be36ab1e6921","size":81222,"noattachment":false,"key":"/@ndelangen/react-treebeard/-/@ndelangen/react-treebeard-3.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@ndelangen/react-treebeard/download/@ndelangen/react-treebeard-3.0.1.tgz"},"maintainers":[{"name":"ndelangen","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_3.0.1_1536301679742_0.5864972774556261"},"_hasShrinkwrap":false,"publish_time":1536301679875,"_cnpm_publish_time":1536301679875},"3.0.0":{"name":"@ndelangen/react-treebeard","version":"3.0.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":{"@emotion/styled":"^9.1.3","emotion":"^9.1.3","react":"^15.5.4 || ^16.0.0","react-dom":"^15.5.4 || ^16.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":"^16.4.2","react-dom":"^16.4.2","react-hot-loader":"^4.3.5","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":{"@emotion/core":"0.13.0","@emotion/styled":"0.10.5","babel-runtime":"^6.23.0","deep-equal":"^1.0.1","prop-types":"^15.6.2","shallowequal":"^1.1.0","velocity-react":"^1.3.1"},"gitHead":"bc0584da975fede2e3b7c1ed7e0827dc3b81a707","_id":"@ndelangen/react-treebeard@3.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"0a48adecfd1ea028843ab6c9d2c04cf2a1e57d3d","size":81218,"noattachment":false,"key":"/@ndelangen/react-treebeard/-/@ndelangen/react-treebeard-3.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@ndelangen/react-treebeard/download/@ndelangen/react-treebeard-3.0.0.tgz"},"maintainers":[{"name":"ndelangen","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_3.0.0_1535709393146_0.5235938155216509"},"_hasShrinkwrap":false,"publish_time":1535709393240,"_cnpm_publish_time":1535709393240},"2.1.0":{"name":"@ndelangen/react-treebeard","version":"2.1.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":{"emotion":"^9.1.3","react":"^15.5.4 || ^16.0.0","react-dom":"^15.5.4 || ^16.0.0","react-emotion":"^9.1.3"},"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","emotion":"^9.1.3","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-emotion":"^9.1.3","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","velocity-react":"^1.3.1"},"gitHead":"9f5e93dae4894c86c0dc861e94c82cf6a2deecc3","_id":"@ndelangen/react-treebeard@2.1.0","_npmVersion":"5.6.0","_nodeVersion":"9.8.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"shasum":"42a65d9b69669051609c0aeac79433e7fec6a8f1","size":81323,"noattachment":false,"key":"/@ndelangen/react-treebeard/-/@ndelangen/react-treebeard-2.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@ndelangen/react-treebeard/download/@ndelangen/react-treebeard-2.1.0.tgz"},"maintainers":[{"name":"ndelangen","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_2.1.0_1527200203716_0.6582959065066607"},"_hasShrinkwrap":false,"publish_time":1527200203860,"_cnpm_publish_time":1527200203860}},"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","_attachments":{},"homepage":"https://github.com/alexcurtis/react-treebeard#readme","bugs":{"url":"https://github.com/alexcurtis/react-treebeard/issues"},"license":"MIT"}