Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/storybook-eol/react-treebeard
React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
https://github.com/storybook-eol/react-treebeard
Last synced: about 2 months ago
JSON representation
React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
- Host: GitHub
- URL: https://github.com/storybook-eol/react-treebeard
- Owner: storybook-eol
- License: mit
- Archived: true
- Created: 2015-10-08T07:23:14.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-02-14T19:27:27.000Z (almost 3 years ago)
- Last Synced: 2024-10-16T09:08:21.987Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://storybooks.github.io/react-treebeard
- Size: 996 KB
- Stars: 1,689
- Watchers: 88
- Forks: 294
- Open Issues: 72
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-treebeard
[](https://travis-ci.org/storybookjs/react-treebeard) [](https://coveralls.io/github/storybookjs/react-treebeard?branch=master)
React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
### Install
```
npm install react-treebeard --save
```
### [Example](http://storybookjs.github.io/react-treebeard/)
An online example from the `/example` directory can be found here: [Here](http://storybookjs.github.io/react-treebeard/)
### Quick Start
```javascript
import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import {Treebeard} from 'react-treebeard';
const data = {
name: 'root',
toggled: true,
children: [
{
name: 'parent',
children: [
{ name: 'child1' },
{ name: 'child2' }
]
},
{
name: 'loading parent',
loading: true,
children: []
},
{
name: 'parent',
children: [
{
name: 'nested parent',
children: [
{ name: 'nested child 1' },
{ name: 'nested child 2' }
]
}
]
}
]
};
class TreeExample extends PureComponent {
constructor(props){
super(props);
this.state = {data};
this.onToggle = this.onToggle.bind(this);
}
onToggle(node, toggled){
const {cursor, data} = this.state;
if (cursor) {
this.setState(() => ({cursor, active: false}));
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
}
render(){
const {data} = this.state;
return (
);
}
}
const content = document.getElementById('content');
ReactDOM.render(, content);
```
If you use react-hooks you should do something like this:
```javascript
import React, {useState} from 'react';
const TreeExample = () => {
const [data, setData] = useState(data);
const [cursor, setCursor] = useState(false);
const onToggle = (node, toggled) => {
if (cursor) {
cursor.active = false;
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
setCursor(node);
setData(Object.assign({}, data))
}
return (
)
}
const content = document.getElementById('content');
ReactDOM.render(, content);
```
### Prop Values
#### data
`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired`
Data that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in `example/data.js`
#### onToggle
`PropTypes.func`
Callback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state.
#### style
`PropTypes.object`
Sets the treeview styling. Defaults to `src/themes/default`.
#### animations
`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])`
Sets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`.
#### decorators
`PropTypes.object`
Decorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below:
```javascript
const decorators = {
Loading: (props) => {
return (
loading...
);
},
Toggle: (props) => {
return (
// Vector Toggle Here
);
},
Header: (props) => {
return (
{props.node.name}
);
},
Container: (props) => {
return (
// Hide Toggle When Terminal Here
);
}
};
```
### Data Attributes
```javascript
{
id: '[optional] string',
name: 'string',
children: '[optional] array',
toggled: '[optional] boolean',
active: '[optional] boolean',
loading: '[optional] boolean',
decorators: '[optional] object',
animations: '[optional] object'
},
```
#### id
The component key. If not defined, an auto-generated index is used.
#### name
The name prop passed into the Header component.
#### children
The children attached to the node. This value populates the subtree at the specific node. Each child is built from the same basic data structure. Tip: Make this an empty array, if you want to asynchronously load a potential parent.
#### toggled
Toggled flag. Sets the visibility of a node's children. It also sets the state for the toggle decorator.
#### active
Active flag. If active, the node will be highlighted. The highlight is derived from the `node.activeLink` style object in the theme.
#### loading
Loading flag. It will populate the treeview with the loading component. Useful when asynchronously pulling the data into the treeview.
#### decorators / animations
Attach specific decorators / animations to a node. Provides the low level functionality to create visuals on a node-by-node basis. These structures are the same as the top level props, described above.