{"_id":"@ndelangen/react-treebeard","_rev":"3-fa038f67e69076c7ef30dccb27fca0b7","name":"@ndelangen/react-treebeard","dist-tags":{"latest":"3.0.1"},"versions":{"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":{"integrity":"sha512-1xFFS2IYLvaEZo5PnkDiJALSljS3u8gR7dovn3CIr0W160ZJNGwU49qaC05T9WaBaybnhT8PSh0SywzCOeSlpg==","shasum":"42a65d9b69669051609c0aeac79433e7fec6a8f1","tarball":"https://registry.npmjs.org/@ndelangen/react-treebeard/-/react-treebeard-2.1.0.tgz","fileCount":39,"unpackedSize":324444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBznNCRA9TVsSAnZWagAA94cP/itM/RvX6XQgeCt/PGLY\nlk+HT5IqPutozAHSKKGM9qSqbKZDcheNbxs89/XRaBmo3YG13OcE7Nbi5IkQ\n/nZTFM/w3oBsV/ilgyk9tGnbYOAiVbHlHpfVhau3+4p3xxj/NcrvOgouJ2p6\n93A0CTT2zCmKalcXTQhWxudmiHaL1sdYseRxtlsf5SuyhQZwzETrpo4vv+mm\nwwo4LtwczVNlN3crngToWzgCioaT0m78sy2QFza782hlBSgctPyRH3dLDngM\nXfCORDpsSaNiHm2NIk1xR5OTARmHuNp2aE6R9nbX0yHmGW03Yaf/UqkAFU4H\nXDAQZZm8CtcWIBfy6D4C6H4xXexxmp4bSxw7H3AWIlsWoyHoHjnJLDROexWy\nsH2YkQFU3tGmGhgVOPnVUWcO+aiFSrC0ljkIu4uT5xFqT2Lbv/asmM8361m1\nHZoTqKlxWlZln/1iG9qwsu82v96iK3yxjCOpu5u1q+etTY5MypJIXM1jVgbZ\nxCGSAfYdur9vXg78vkNDw9IWbhWlG8TqH5DWS/shJPQpUP7YmGj/VFmCYztH\ntHbokllJavwUmtqjDC1gXP0k3nbifMkj6bdXEOhgNzjJ7lpvgp5ox+/pLBVS\ngNUfrGXFtitgFBKquHRe3uwP8Z7GNpT1I6vtZLY2XJvevcsL14eGA1rTERxN\nyE4g\r\n=DhQV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUXJYK5kcM6zIKrw/A7HMxTiasK5DtIOak/n16OaDimAiB0BC++kZFwlBxJphFwLyxgqZXHhFsUzuaoedK99XgG+A=="}]},"maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_2.1.0_1527200203716_0.6582959065066607"},"_hasShrinkwrap":false},"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":{"integrity":"sha512-0ZIboPhpqkOUOjlILHIPLAaaQVVrLqYqN7LnzZYxxmMhqVKCDz+VVcTWFn8L3vzDWUW6SzT0L+UA0obQcB+O+g==","shasum":"0a48adecfd1ea028843ab6c9d2c04cf2a1e57d3d","tarball":"https://registry.npmjs.org/@ndelangen/react-treebeard/-/react-treebeard-3.0.0.tgz","fileCount":39,"unpackedSize":323722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiRDRCRA9TVsSAnZWagAAHG0P/RnaudeNFFxb9+2eWjfw\nWujzdWwQE7AzpRAtsoIe6Dd/8fRMKxMhqvonxwhHyLYUU3VIYEF6lHLbneOq\noykh9iYVni5kPVFwTwyzG6k3DiArXf+P8lQRirstFvdwug2CNM8WtH223nHm\nnvPEvCH3LkaGUts2b5WK1UBL8djQn7ANNFVlJsMleTbxDfNN5xM9AyG5t0jj\nFYUX7m0Qphk/wfrmPs+SjDiSA4orVL2WTqvAFY3EC36QPBxaqcbRCqLZbnjr\ntfdhNPr1H3hHjLfpsY3dvy3uGmBHa3VTrcEHoCyoTx3d1PY05alf3G5v7U+D\nkAZqhYuDsUyr1ey0KA84RQ/DCixFkpdeyFHWST/bArGnYQP/1cUBze2jBxZc\nOa/zUXJw1v3V8LAqBwBPfvzq3sUuKMv9ORWgzP1dIa4+lQbut58qmffKyxby\noO05n9ZNsMquC/pnTwdzsahvohR2uEysgmfUA8fOUUHZ5fsG34EVMGA+zX6q\nMxYYshHOCoJTfJmiUBqTPFZT/mWWWwG+crIItbJ5CoPp+iXdG+ht7KZ8zHz5\n2PZZXndFnOyHTFHfgxmQXkb4wMO853HWBv7XBXlXfHEcQR3iGOQRaXwg6sWO\n3TWThTAik9djJbExTRQ2aB5iCUmdKHXCi3YscP5PMKlw8efLbxVvZm829a/F\nI0AD\r\n=Qg7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2Nswk4/dLUeC82ar3Ngx3Jl2N2kakOhIYy9pVtg4yBAIgRaVOBF4cgsKUDY15nSqU1AdeyNyeEskbrJda6vvQn/Y="}]},"maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_3.0.0_1535709393146_0.5235938155216509"},"_hasShrinkwrap":false},"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":{"integrity":"sha512-4VEBLbtI4Kd3otTcdqHAa4LsIbGPrmEEVGXr4cHDJJpiohCXI5SP5GuiiLVNgi8HrokrEtwKSXvd9izZkED4kQ==","shasum":"644f959a7fff26f2f3e4753c6804be36ab1e6921","tarball":"https://registry.npmjs.org/@ndelangen/react-treebeard/-/react-treebeard-3.0.1.tgz","fileCount":39,"unpackedSize":323702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkhpwCRA9TVsSAnZWagAAC2QP/043/5qJSF1kc6wqtD+P\nSidHbSrMjnRkPofMqGsYAZYAHxeD1v7KbKFjAw/JiIha5AvvpPSRl3Ow27KP\nslVv5E+d6cCTYzJ/3iLQLW6d4g4OidZHAVVS6A8fWDIizQtU5kPE+DinGvqG\ncgFjWXl+I3lqCy7HSB8hN1xHc3LdRshUyJPDV9WHdY2e+HdWr6xWFpfp8PYE\n8XD7DXL2m81Nl+yYPbHlms5QbaEh9J8J/wTXCmaTPv5XvwsNp0X8oUeTWmZj\ni3TTulrre0oIyZc9hiBIE8xC6z7uGAiDlQ4H0bZa1W/p61W6gh5O01Y2T6Dt\nlD7TduuRaXzD7Y6Tk/iJ3UCLB+y/FtSlgiX9Qq3TgoMbhJEPHuWAqlYAq7UT\nlPcJnVbe3ManI+cW7z68dd/ok41tWDW6EzGmFfJO650tqODZ0dMmMZnbiL+9\nVn/Aghq7IC+dnwNurbY3nZxDyHHfT012Z1V1wA67rvhA5Oik1kG15xhj6d8q\nDr1MBVYUCmjhPGS/NzcCdCmOvfQdHOEwQWSai3jF6RMYhyQ9KXrerWeRug+U\n17r42ctdKMkV7LiCrs5q9Ss4w59yqEHqHvCDjfZmx0w45GmPOFhTN2xwymJK\nGvOq671W7D8XgLDRVCDTJaNULPlnxiaBW/Aqk8pz7Mbv37TS1fcSDPUKrJSb\nA31v\r\n=n8FS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+QHOEdVjdwzpsFlY+iRmwdlX6uyv3PZho6HuPXwdXcAiEAi7PMwGZP5VhySlXGRw+IcDqEwADt7dckdLhbIH8l3aI="}]},"maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-treebeard_3.0.1_1536301679742_0.5864972774556261"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-24T22:16:43.434Z","2.1.0":"2018-05-24T22:16:43.860Z","modified":"2022-04-06T07:48:19.549Z","3.0.0":"2018-08-31T09:56:33.240Z","3.0.1":"2018-09-07T06:27:59.875Z"},"maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"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"}