## React Tree Menu Component 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](http://mandarinconlabarba.github.io/react-tree-menu/example/index.html). ## Install ``` npm install --save react-tree-menu ``` ## General Usage ``` var TreeMenu = require('react-tree-menu').TreeMenu, TreeNode = require('react-tree-menu').TreeNode; ... ``` ## Exports This package exports the following: ``` module.exports = { TreeMenu: require('./src/TreeMenu.jsx'), TreeNode: require('./src/TreeNode.jsx'), Utils: require('./src/TreeMenuUtils') }; ``` ## Declarative use In your `.render()` method, embed `TreeMenu`: ```jsx return ; ``` ## Dynamic use w/ the 'data' prop In your `.render()` method, embed `TreeMenu` with a `data` prop: ```jsx 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 ; ``` ## `` Style Guide To style ``, use the following props: * [classNamePrefix](#classnameprefixstring) * [expandIconClass](#expandiconclassstring) * [collapseIconClass](#collapseiconclassstring) See the [example CSS](example/tree-view.css) for how this works. ## `` Props ### `sort={ || }` * If sort is a `Boolean` and true (i.e. ``), the node label will be used for sorting. * If sort is a `Function`, it will be used as the sort function, with the argument the `React` element (props are available for sorting). Example: ``` node.props.value} ... /> ``` ### `stateful={}` If you need it, you can make ` 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. ### `classNamePrefix={}` The prefix to put in front of all the CSS classes for nested element (like the container for the menu, the checkbox, etc) ### `identifier={}` Optional prop/field to use for the node identifier. Defaults to Array index ### `collapsible={}` Whether or not nested components are collapsible. Defaults to true. ### `expandIconClass={}` The CSS class to give the expand icon component. Empty by default. ### `collapseIconClass={}` The CSS class to give the collapse icon component. Empty by default ### `labelFilter={}` A function that can be used to filter/transform the label. Empty by default ### `labelFactory={}` A factory function that returns a label node. See example source for usage. ### `checkboxFactory={}` A factory function that returns a checkbox node. See example source for usage. ### `onTreeNodeClick={}` Function handler for click event on components. If the `TreeNode` has an `onTreeNodeSelectChange` handler, this is not fired. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop. ### `onTreeNodeCollapseChange={}` Function handler for collapse change event on components. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop. ### `onTreeNodeCheckChange={}` Function handler for checkbox change event on components. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop. ### `onTreeNodeSelectChange={}` Function handler for select state change event on components. An alternative for cases when checkboxes aren't desired. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop. ### `data={||

			Stars	Issues	Version	Updated	Created	Size
	react-tree-menu		170	18	1.5.0	9 years ago	10 years ago
	react-ui-tree		758	47	4.0.0	6 years ago	9 years ago

react-tree-menu vs react-ui-tree

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past