react-treeview-z

LIVE EXAMPLE

---

---

Description

• React treeview. (Customize / dynamic)
• Apply perfect-scrollbar

---

Preview

Usage

npm install react-treeview-z

Import the module in the place you want to use:

// App.js
import 'react-treeview-z/build/styles.css';

// import in module
import { TreeScrollView, TreeView, TreeItem } from "react-treeview-z";

Snippet

TreeItem

    <TreeItem ...props1 nodeContent={<div>level 1</div>}>
        <TreeItem nodeContent={'Content1'} />
        <TreeItem nodeContent={<span>Ab</span>}>
            ... more
        </TreeItem>
        ... more
    </TreeItem>
    ... more
    <TreeItem ...props1 >
        {item somthing} // customize child
    </TreeItem>

TreeView

    // ********************
    // no scrollbar
    <TreeView>
        <TreeItem nodeContent={'Content1'} />
        ...
    </TreeView>

    // { abc.map(() => <TreeItem /> ) }...

TreeScrollView

<TreeScrollView ...props2 > // apply perfect scrollbar
    <TreeItem nodeContent={<div>level 1</div>}>
        {... more}
    </TreeItem>
    {... more}
</TreeScrollView>

---

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

`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