react-treeview-z

LIVE EXAMPLE

---

Description

• React treeview. (Customize / dynamic)

• Apply perfect-scrollbar

---

Usage

npm install react-treeview-z

Import the module in the place you want to use:

import { TreeScrollView, TreeItem, TreeView } from 'react-treeview-z'
import 'react-treeview-z/build/styles.css'; // for TreeScrollView

Snippet

simple

    <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>

    // ********************
    // 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
isOpen	boolean	expand state (default false)
disabled	boolean	disabled toggle expand/collapse (default false)
selected	boolean	selected of tree-item (default false)
onClick	function	item click event (use update selected [your handler])
onToggle	function	item onToggle event (expand/collapse)
fullRowSelection	boolean	full row background color when selected (default false only label)
selectedWhenToggle	boolean	active event onClick 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)
selfData	any	tree-item's data [onClick = hanleClick(evt, isSelect, selfData)]

props2 using props

[ className, effectData, maxHeight, maxWidth, width, height, always (true) ]

of react-perfect-scrollbar-z

Note

This library does not apply some css the cases where you customize yourself.

RUN

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT