Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MandarinConLaBarba/react-tree-menu
A stateless tree menu component for React.
https://github.com/MandarinConLaBarba/react-tree-menu
Last synced: about 2 months ago
JSON representation
A stateless tree menu component for React.
- Host: GitHub
- URL: https://github.com/MandarinConLaBarba/react-tree-menu
- Owner: MandarinConLaBarba
- License: mit
- Created: 2015-02-17T13:50:04.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T13:09:18.000Z (almost 7 years ago)
- Last Synced: 2024-10-15T09:34:23.407Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://mandarinconlabarba.github.io/react-tree-menu/example/index.html
- Size: 821 KB
- Stars: 170
- Watchers: 10
- Forks: 51
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-tree-menu - A stateless tree menu component for React. (Uncategorized / Uncategorized)
- awesome-list - react-tree-menu - A stateless tree menu component for React. (Demos / Menu)
README
## 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={||}`
The data to use when building components dynamically. Required if there aren't any nested `` 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
}
}
```
## Callback API for `` event handler props
`` callbacks will receive an array representation of the node. Example:
```
var onClick = function(node) {
//node is in format: [, [...,] ]
//where is the that sourced the event
//...
}
return ;
```
## `` Props
### `label={}`
The node label. Required.
### `checkbox={}`
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
### `checked={}`
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
### `selected={}`
Whether or not the node is selected. An alternative to using `checked` in conjunction w/ `checkbox`.
### `collapsible={}`
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 ``
### `collapsed={}`
If the node is collapsible, whether or not the node is collapsed. Defaults to false.