A React Treeview Component
npm install react-lazy-treeRecursively render tree data structures.
Control tree node markup, content and style.
Render lazily or greedily.
Specify vertical animation, CSS classes, initial active node, and more.
``sh`
npm install --save react-lazy-tree
`JSX
import ReactLazyTree from 'react-lazy-tree'
...
mapInitialActiveNode: (node) => node.label === 'Dresses',
mapListClassName: ({ depth }) => {
const exampleDepth = example--depth-${depth};
return example ${exampleDepth};
},
mapListItemClassName: ({ isOnActivePath }) => {
const modifier = isOnActivePath ? 'expanded' : 'contracted';
const nodeIcon = example__node--${modifier};
return example__node ${nodeIcon};
},
mapNodeContent: ({ depth, isActiveNode }) => {
const labelDepth = example__label--${depth};example__label ${labelDepth} ${isActive}
const isActive = isActiveNode ? 'example__label--active' : '';
const className = ;
return (
className,
text: node.label
}}/>
);
},
onActiveNodeChanged: activeNodeChangedHandler
}}/>
`
data - Tree data structure, or a collection of tree data structures.
* Type: Object | Array
* Required: Yes
mapNodeContent - Specify content, markup, and style for tree node presentation.depth
* Type: Function
* Required: Yes
* Parameters:
* : Numberindex
* : NumberisActiveNode
* : BooleanisLeafNode
* : BooleanisOnActivePath
* : Booleannode
* : Object
* Return Type: String | JSX
* Notes: Parameters are named (i.e. properties of an object).
childrenPropertyName - Specify data node children property name.children
* Type: String
* Required: No
* Default:
mapListClassName - Specify HTML list (UL) class names.depth
* Type: Function
* Required: No
* Parameters:
* : NumberisOnActivePath
* : Booleannode
* : Object
* Return Type: String
* Notes: Parameters are named (i.e. properties of an object).
mapListItemClassName - Specify HTML list-item (LI) class names.depth
* Type: Function
* Required: No
* Parameters:
* : NumberisActiveNode
* : BooleanisLeafNode
* : BooleanisOnActivePath
* : Booleannode
* : Object
* Return Type: String
* Notes: Parameters are named (i.e. properties of an object).
mapInitialActiveNode - Specify a node that should be active initially.node
* Type: Function
* Required: No
* Parameters:
* : Object
* Return Type: Boolean
* Notes: Returns first match. Multiple active nodes not yet supported.
onActiveNodeChanged - Handle active node changes as a result of user interaction.activePath
* Type: Function
* Required: No
* Parameters:
* : Stringdepth
* : Numbere
* : Objectindex
* : Numbernode
* : Object
* Notes: Parameters are named (i.e. properties of an object).
interactiveStartDepth - Specify at what depth the rendered tree should become interactive. Depth is zero based.-1
* Type: Number
* Required: No
* Default: 0
* Notes: To suppress interactivity entirely, specify .
shouldLazyRender - Specify should tree nodes be rendered when becoming visible or at mount time.
* Type: Boolean
* Required: No
* Default: true
shouldShowAllNodes - Specify the entire tree should be rendered initially.shouldLazyRender
* Type: Boolean
* Required: No
* Default : false
* Notes: Overrides and mapInitialActiveNode
verticalAnimationConfig - Specify CSS transition duration and timing.durationInMs
* Type: Object
* Required: No
* Properties:
* : Numbertiming
* : Keyword | FunctiondurationInMs
* Default:
* : 300timing
* : ease-in
Please open an issue.
`ssh`
git clone https://github.com/ethanselzer/react-lazy-tree.git
cd react-lazy-tree/example
npm install
npm start
`ssh`
git clone https://github.com/ethanselzer/react-lazy-tree.git
cd react-lazy-tree
npm install`
See available commands:ssh``
npm run
Please contribute using Github Flow. Create a branch,
add commits, and open a pull request.
You are awesome! ✨💫