https://github.com/chenglou/react-treeview

Easy, light, flexible tree view made with React.
https://github.com/chenglou/react-treeview

Last synced: 7 days ago
JSON representation

Easy, light, flexible tree view made with React.

• Host: GitHub
• URL: https://github.com/chenglou/react-treeview
• Owner: chenglou
• Created: 2013-07-18T07:39:37.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2018-11-16T23:44:39.000Z (about 6 years ago)
• Last Synced: 2024-05-21T20:15:40.518Z (7 months ago)
• Language: JavaScript
• Size: 1.17 MB
• Stars: 1,087
• Watchers: 30
• Forks: 165
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md

Awesome Lists containing this project

• awesome-react-components-all - react-treeview - Easy, light, flexible tree view made with React. (Uncategorized / Uncategorized)
• awesome-react-components - react-treeview - Easy, light, flexible tree view made with React. (UI Components / Tree)
• awesome-react - react-treeview - Easy, light, flexible tree view made with React.  (UI Components / Tree)
• awesome-list - react-treeview - Easy, light, flexible tree view made with React. (Demos / Tree)
• awesome-react-components - react-treeview - Easy, light, flexible tree view made with React. (UI Components / Tree)
• awesome-react-components - react-treeview - Easy, light, flexible tree view made with React. (UI Components / Tree)
• awesome-react-components - react-treeview - Easy, light, flexible tree view made with React. (UI Components / Tree)
• fucking-awesome-react-components - react-treeview - Easy, light, flexible tree view made with React. (UI Components / Tree)

README

        
# React-treeview [![npm version](https://badge.fury.io/js/react-treeview.svg)](https://www.npmjs.com/package/react-treeview) [![Bower version](https://badge.fury.io/bo/react-treeview.svg)](http://badge.fury.io/bo/react-treeview)

Easy, light, flexible treeview made with [React](http://facebook.github.io/react/).

[Demos](https://cdn.rawgit.com/chenglou/react-treeview/aa72ed8b9e0b31fabc09e2f8bd4084947d48bb09/demos/index.html) from the [demos folder](https://github.com/chenglou/react-treeview/tree/aa72ed8b9e0b31fabc09e2f8bd4084947d48bb09/demos).

## install

Npm:

```sh

npm install react-treeview

```

Bower:

```sh

bower install react-treeview

```

The CSS file:

```html

```

## API

#### <TreeView />

The component accepts [these props](https://github.com/chenglou/react-treeview/blob/f75fb4e2706f3e9087bcf371308e85154a1946da/src/react-treeview.jsx#L6-L12).

- `collapsed`: whether the node is collapsed or not.

- `defaultCollapsed`: the [uncontrolled](http://facebook.github.io/react/docs/forms.html#uncontrolled-components) equivalent to `collapsed`.

- `nodeLabel`: the component or string (or anything renderable) that's displayed beside the TreeView arrow.

- `itemClassName`: the class name of the `.tree-view_item` div.

- `treeViewClassName`: the class name of the `.tree-view` div.

- `childrenClassName`: the class name of the `.tree-view_children` item div.

TreeViews can be naturally nested.

The extra properties transferred onto the arrow, so all attributes and events naturally work on it.

## Styling

The CSS is flexible, commented and made to be easily customized. Feel free to inspect the demo's classes and check the [short CSS code](https://github.com/chenglou/react-treeview/blob/aa72ed8b9e0b31fabc09e2f8bd4084947d48bb09/react-treeview.css).

## Build It Yourself/Run the Demos

Build: `npm install && npm run prerelease`

Demos: `npm install && npm start && open http://localhost:3000`

## License

MIT.