A stateless tree component with the following features:
- Checkboxes
- Collapsible nodes
- Dynamic tree generation
- Declarative tree menus
- Built with the Flux proposal in mind (i.e. trickle-down state)
Please check out the Demo.
npm install --save react-tree-menu
var TreeMenu = require('react-tree-menu').TreeMenu,
TreeNode = require('react-tree-menu').TreeNode;
...
<TreeMenu/>
<TreeMenu>
<TreeNode/>
</TreeMenu>
This package exports the following:
module.exports = {
TreeMenu: require('./src/TreeMenu.jsx'),
TreeNode: require('./src/TreeNode.jsx'),
Utils: require('./src/TreeMenuUtils')
};
In your .render() method, embed TreeMenu:
return <TreeMenu
identifier={"id"}
onTreeNodeClick={this._setLastActionState.bind(this, "clicked")}
onTreeNodeCheckChange={this._setLastActionState.bind(this, "checked")}
collapsible={false}
expandIconClass="fa fa-chevron-right"
collapseIconClass="fa fa-chevron-down">
<TreeNode label="Option 1" id="option_1"/>
<TreeNode label="Option 2" collapsible={false} id="option_2">
<TreeNode label="Option A" checkbox={true} id="option_2.a"/>
<TreeNode label="Option B" checkbox={true} id="option_2.b"/>
</TreeNode>
<TreeNode label="Option 3" id="option_3"/>
<TreeNode label="Option 4" id="option_4"/>
</TreeMenu>;In your .render() method, embed TreeMenu with a data prop:
var data = [{
label : "Option 1"
},
{
label : "Option 2",
children : [
{
checkbox: true,
label: "Sub Option A",
children: [
{
label: "Third Level Nest Option 1",
checkbox : true
},
{
label: "Third Level Nest Option 2",
checkbox : true
}
]
},
{
checkbox: true,
label: "Sub Option B"
}
]
}];
return <TreeMenu
onTreeNodeClick={...}
onTreeNodeCollapseChange={...}
onTreeNodeCheckChange={...}
data={data} />;To style <TreeMenu/>, use the following props:
See the example CSS for how this works.
- If sort is a
Booleanand true (i.e.<TreeMenu sort ... />), the node label will be used for sorting. - If sort is a
Function, it will be used as the sort function, with the argument theReactelement (props are available for sorting). Example:
<TreeMenu sort={(node) => node.props.value} ... />
If you need it, you can make <TreeMenu/> keep track of its own state. That being said, react-tree-menu was designed to
fit inside Flux architecture, which encourages components to render based on props passed from the Controller-View. Defaults to false.
The prefix to put in front of all the CSS classes for nested element (like the container for the menu, the checkbox, etc)
Optional prop/field to use for the node identifier. Defaults to Array index
Whether or not nested components are collapsible. Defaults to true.
The CSS class to give the expand icon component. Empty by default.
The CSS class to give the collapse icon component. Empty by default
A function that can be used to filter/transform the label. Empty by default
A factory function that returns a label node. See example source for usage.
A factory function that returns a checkbox node. See example source for usage.
Function handler for click event on components. If the TreeNode has an onTreeNodeSelectChange handler, this is not fired. See Callback API. Defaults to noop.
Function handler for collapse change event on components. See Callback API. Defaults to noop.
Function handler for checkbox change event on components. See Callback API. Defaults to noop.
Function handler for select state change event on components. An alternative for cases when checkboxes aren't desired. See Callback API. Defaults to noop.
The data to use when building components dynamically. Required if there aren't any nested <TreeNode/> elements declared.
Sample array format:
[{label : "Option 1"},
{
label : "Option 2",
children : [
{
checkbox: true,
label: "Sub Option A",
children: [{
label: "Third Level Nest Option 1",
checkbox : true,
children : {...},
}]
},
{
checkbox: true,
label: "Sub Option B"
}]}]
Sample object format:
{
"Option 1" : {
checked: true,
checkbox: true,
children: {
"Sub Option 1" : {
checked: false
},
"Sub Option 2" : {
checked: false,
checkbox: true,
children: {
"Sub-Sub Option 1" : {
checked: false,
checkbox: true
},
"Sub-Sub Option 2" : {
checked: false,
checkbox: true
}
}
}
}
},
"Option 2" : {
checked: false,
checkbox: true
}
}
<TreeMenu/> callbacks will receive an array representation of the node. Example:
var onClick = function(node) {
//node is in format: [<topLevelId>, [...<nodeId>,] <nodeId>]
//where <nodeId> is the <TreeNode/> that sourced the event
//...
}
return <TreeMenu onTreeNodeClick={onClick} />;
The node label. Required.
Whether or not the node has a checkbox. Defaults to false. If the node checkbox={true}, clicking on the label also fires the onTreeNodeCheckChange function
If the node has a checkbox, whether or not the node is checked. If the node checkbox={true}, clicking on the label also fires the onTreeNodeCheckChange
function instead od the onTreeNodeClick function
Whether or not the node is selected. An alternative to using checked in conjunction w/ checkbox.
Whether or not the node is collapsible. If the node has no children, this value has no effect. Defaults to true.
This value is overridden by the collapsible prop value set on the root <TreeMenu/>
If the node is collapsible, whether or not the node is collapsed. Defaults to false.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent