# tree-render-viewer > Just render a recursion nodes Latest version **0.2.7** (published 2018-06-25) · ISC license · 0 weekly downloads ## Install ```sh npm install tree-render-viewer pnpm add tree-render-viewer yarn add tree-render-viewer bun add tree-render-viewer ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.7 | | Published | 2018-06-25 | | First published | 2018-03-18 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 11 | | Unpacked size | 354.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Luis Locon | | Maintainers | estratekpersona | ## Links - npm: https://www.npmjs.com/package/tree-render-viewer - Repository: https://bitbucket.org/hcmestratek/TreeComponent - Homepage: https://bitbucket.org/hcmestratek/treecomponent - npm.io page: https://npm.io/package/tree-render-viewer ## Dependencies (11) - [react](https://npm.io/package/react.md) ^16.2.0 - [webpack](https://npm.io/package/webpack.md) ^4.1.1 - [bootstrap](https://npm.io/package/bootstrap.md) ^4.0.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [css-loader](https://npm.io/package/css-loader.md) ^0.28.10 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.1 - [reactstrap](https://npm.io/package/reactstrap.md) ^5.0.0-beta.2 - [file-loader](https://npm.io/package/file-loader.md) ^1.1.11 - [style-loader](https://npm.io/package/style-loader.md) ^0.20.3 - [react-spinners](https://npm.io/package/react-spinners.md) ^0.2.6 - [react-contextmenu](https://npm.io/package/react-contextmenu.md) ^2.9.2 ## Recent versions - 0.2.7 (latest) — 2018-06-25 - 0.2.6 — 2018-06-25 - 0.2.5 — 2018-05-25 - 0.2.4 — 2018-05-02 - 0.2.3 — 2018-04-26 - 0.2.2 — 2018-04-02 - 0.2.1 — 2018-04-02 - 0.2.0 — 2018-03-23 - 0.1.7 — 2018-03-21 - 0.1.6 — 2018-03-20 - 0.1.5 — 2018-03-19 - 0.1.4 — 2018-03-19 - 0.1.3 — 2018-03-19 - 0.1.1 — 2018-03-19 - 0.1.0 — 2018-03-18 ## README [![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard) # Tree-render-viewer This component is used to render data in a tree structure. Better known as TreeMenu ## Usage To install run this command on terminal, need to have node and npm `$ npm install --save tree-render-viewer` Later import tree to your project `import { TreeWithSearchBar } from 'tree-render-viewer'` There are two kinds of components that you can export, `` and ``, the first contains a search toolbar with an expand/collapse all button, and the second only renders a tree. It also imports this StyleSheet with predefined styles to show the tree, you want to change the style overwrite the classes. `import 'tree-render-viewer/build/_tree.css'` ### Props ### `` | Name | Function | |--|--| | treeData | **Tree data is an array of objects**, it must contain the necessary information of the tree, it is recommended that each object always have these attributes {id, name, children, parentId} those 4 are necessary for the rendering | | onNodeClick | **onNodeClick is a function** that receives the information of each node of the tree, by clicking on the label of some of the components that are rendered. `onNodeClick (node: object)` | | toggleAll | **toggle All is a function**, which changes the state of the collapsible, it is recommended to have a state called `collapseAll: false` and that this function changes to the new state. `toggleAll () {this.setState ((prevState) => ({collapseAll: !prevState.collapseAll}))}` | | idAttr | **idAttr is a string**, which suggests to the tree, to know what the key **ID** is on the tree | | labelAttr | **labelAttr is a string**, which suggests to the tree, to know what the key **label** is on the tree | | childrenAttr | **childrenAttr is a string**, which suggests to the tree, to know what the key **children** is in the tree | | collapseAll | **collapseAll should be a state**, in the implementation component. It is used to change the state of collapsables. | | handleChangeTextFilter | **handleChangeTextFilter is a function**, which returns the text that is changed in the input of the search bar. In this function the text that is obtained is returned, ideal to make a search in the tree, using some function of the handlers, or one of its own. | | contextual | **contextual is a bool** enabled the contextual menus for the nodes. | | ctxMenuItems | **ctxMenuItems is an array of objects**, you can pass handler functions for actions with contextual menus, they always receive an event and the data for the node. Example `const add = (e, data) => console.log(data) // data is all the node info that is clicked` | | labelForPlaceHolder | **labelForPlaceHolder is an string**, useful to change the label for placeholder of the searchbar input. | ### Utils There are added functions that can also be called, we call them **handlers**. #### `mapTree(@treeData: arrayOf(Object), @structure: Object)` This function receives the data, and a structure object from which to find the data and assign it a new key. First map a node, and added to the tree. ### `mapNode(@node: object, @structure: Object)` This function map a node for the tree ### `appendChildToFather(treeData: arrayOf(Object), child: Object, structure: Object)` This function, take all the array, and search by Id to ParentId the new child, mapped the node, and return a new tree with the new child append. ### `find(node: { name: root, children: arrayOf(Object) }, text)` This function return the path to the node is matched with the text. [![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com) --- _Source: https://npm.io/package/tree-render-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._