react-lazy-tree
v1.0.4
Published
A React Treeview Component
Downloads
32
Maintainers
Readme
react-lazy-tree
Recursively 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.
Demo
Please see demo site and example code.
Status
Installation
npm install --save react-lazy-tree
Usage
import ReactLazyTree from 'react-lazy-tree'
...
<ReactLazyTree {...{
data: 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}`;
const isActive = isActiveNode ? 'example__label--active' : '';
const className = `example__label ${labelDepth} ${isActive}`;
return (
<Label {...{
className,
text: node.label
}}/>
);
},
onActiveNodeChanged: activeNodeChangedHandler
}}/>
Props API
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.
- Type: Function
- Required: Yes
- Parameters:
depth
: 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.
- Type: String
- Required: No
- Default:
children
mapListClassName
- Specify HTML list (UL) class names.
- Type: Function
- Required: No
- Parameters:
depth
: NumberisOnActivePath
: Booleannode
: Object
- Return Type: String
- Notes: Parameters are named (i.e. properties of an object).
mapListItemClassName
- Specify HTML list-item (LI) class names.
- Type: Function
- Required: No
- Parameters:
depth
: 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.
- Type: Function
- Required: No
- Parameters:
node
: 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.
- Type: Function
- Required: No
- Parameters:
activePath
: 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.
- Type: Number
- Required: No
- Default: 0
- Notes: To suppress interactivity entirely, specify
-1
.
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.
- Type: Boolean
- Required: No
- Default : false
- Notes: Overrides
shouldLazyRender
andmapInitialActiveNode
verticalAnimationConfig
- Specify CSS transition duration and timing.
- Type: Object
- Required: No
- Properties:
durationInMs
: Numbertiming
: Keyword | Function
- Default:
durationInMs
: 300timing
: ease-in
Support
Please open an issue.
Examples
git clone https://github.com/ethanselzer/react-lazy-tree.git
cd react-lazy-tree/example
npm install
npm start
Development
git clone https://github.com/ethanselzer/react-lazy-tree.git
cd react-lazy-tree
npm install
See available commands:
npm run
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
You are awesome! ✨💫
License
MIT