react-treeview-z
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

react-treeview-z


LIVE EXAMPLE

NPM JavaScript Style Guide Downloads


Description

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

Preview

Treeview


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

Package Sidebar

Install

npm i react-treeview-z

Weekly Downloads

21

Version

2.1.0

License

MIT

Unpacked Size

37.4 kB

Total Files

11

Last publish

Collaborators

  • delpikye