---
[](https://www.npmjs.com/package/react-treeview-z)
[](https://standardjs.com)
---
#### Description
+ React treeview. (Customize / dynamic)
+ Apply `perfect-scrollbar`
---
#### Preview
#### Usage
```js
npm install react-treeview-z
```
Import the module in the place you want to use:
```js
// App.js
import 'react-treeview-z/build/styles.css';
// import in module
import { TreeScrollView, TreeView, TreeItem } from "react-treeview-z";
```
#### Snippet
##### TreeItem
```js
level 1}>
Ab}>
... more
... more
... more
{item somthing} // customize child
```
##### TreeView
```js
// ********************
// no scrollbar
...
// { abc.map(() => ) }...
```
##### TreeScrollView
```js
// apply perfect scrollbar
level 1}>
{... more}
{... more}
```
---
#### props
##### TreeItem
| **props1** | **type** | **description** |
|-------------------------|----------|------------------------------------------------------------ |
| nodeContent | Any | Content tree item |
| className | String | |
| iconClassName | String | |
| checkboxName | String | |
| checkboxClassName | String | |
| labelCheckboxClassName | String | |
| labelCheckboxText | Any | |
| isOpen | boolean | expand state (default `false`) |
| disabled | boolean | disabled toggle `expand`/`collapse` (default `false`) |
| selected | boolean | selected of tree-item (default `false`) |
| fullRowSelection | boolean | full row background color when selected (default `false` only label) |
| selectedWhenToggle | boolean | active event `onClick` item when click `expand`/`collapse` (default `false`) |
| selectedColor | String | color when selected (default: `#000`) |
| selectedBgColor | String | background color when selected (default: `transparent`) |
| lineColor | String | lineX - lineY color (parent vs child) |
| showXLine | boolean | line path from parent node to child node (default `true`) |
| showYLine | boolean | line path from parent node to child node (default `true`) |
| hideNodeIcon | boolean | hidden plus and minus icon |
| showCheckbox | boolean | showCheckbox |
| selfData | any | tree-item's data [`onClick` = hanleClick(evt, `isSelect`, selfData)] |
| onClick | function | item click event (use update `selected` [your handler]) |
| onToggle | function | item onToggle event (`expand`/`collapse`) |
#####
```
```
**props2**
using props of [react-treeview-z](https://www.npmjs.com/package/react-treeview-z)
```js
`className`,
`effectData`,
`maxHeight`,
`maxWidth`,
`width`,
`height`,
`always` = true
```
#### Note
+ This library does not apply some css the cases where you `customize` yourself.
+ showCheckbox: its support displays checkbox, but if you want to set all selected children, you need to set it manually.
#### RUN
LIVE EXAMPLE
#### License
MIT