Description

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

Preview

Usage

// require
npm install react-perfect-scrollbar-z // // >=version 2
npm install react-treeview-z

Import the module in the place you want to use:

// App.js
import 'react-treeview-z/build/styles.css'; // for TreeScrollView
import "react-perfect-scrollbar-z/build/styles.css"; // >=version 2

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

Snippet

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

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