react-treeview-z
v1.0.1
Published
React treeview (Hooks)
Downloads
313
Maintainers
Readme
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)
]
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