React-React treeview: Easy, light, flexible tree view made with React.

React-treeview npm version Bower version

Easy, light, flexible treeview made with React.

Demos from the demos folder.

install

Npm:

npm install react-treeview

Bower:

bower install react-treeview

The CSS file:

<link rel="stylesheet" type="text/css" href="path/to/react-treeview.css">

API

<TreeView />

The component accepts these props.

  • collapsed: whether the node is collapsed or not.
  • defaultCollapsed: the uncontrolled 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.

Build It Yourself/Run the Demos

Build: npm install && npm run prerelease

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

License

MIT.

Comments

  • The latest upgrade from 0.4.6 - 0.4.7 is not compatible with react 0.14.x
    The latest upgrade from 0.4.6 - 0.4.7 is not compatible with react 0.14.x

    Jun 26, 2017

    The following error shows up in the browser console:

    react-treeview.js:19 Uncaught TypeError: Super expression must either be null or a function, not undefined
        at _inherits (react-treeview.js:19)
        at react-treeview.js:30
        at Object._typeof (react-treeview.js:104)
        at __webpack_require__ (bootstrap f721391…:19)
    ...
    
    Reply
  • Fix propTypes and defaultProps
    Fix propTypes and defaultProps

    Sep 26, 2017

    • propTypes defined in the class with : are invalid (and not working).
    • In my opinion using defaultProps is a more standard way.
    • I removed the bind call and redeclared the handler as an arrow function
    Reply
  • Update docs and examples to use recommended ES6 classes
    Update docs and examples to use recommended ES6 classes

    Oct 7, 2017

    Examples should be updated to use ES6 classes or stateless components instead of using the old createReactClass package.

    Reply
  • Runtime error
    Runtime error

    Nov 21, 2017

    I am getting the error "The tag name provided ('/static/media/index.c0b7a009.jsx') is not a valid name" while render the Treeview. Any guess?

    Reply
  • Dragable version?
    Dragable version?

    Nov 25, 2017

    Is it possible to create a dragable version of this component so as to move a row as a children of an other row? How could we keep normalized store with this approach ?

    Reply
  • Collapse/Uncollapse is slow with a large list of items
    Collapse/Uncollapse is slow with a large list of items

    Jan 16, 2018

    I have a list of about 600 objects that I'm displaying with TreeViews, and things are really slow when I collapse/uncollapse a single item. My code is basically the same as the controlled example, so I think the problem is that the re-render call after I toggle the collapsed state for one of the objects results in a re-render of EVERYTHING in the list of objects.

    I've taken care to ensure that the has a unique key and that the child

    also has a unique key, but that doesn't seem to help React optimize the render.

    Any thoughts, folks?

    Reply
  • Add nodeLabel as a tooltip as well.  Helpful for forced single line / truncate display
    Add nodeLabel as a tooltip as well. Helpful for forced single line / truncate display

    Nov 16, 2018

                                                                                                                                                                                                           
    Reply
  • Change background-color of selected row.
    Change background-color of selected row.

    Aug 25, 2019

    .info:focus {
      background-color: lightblue;
    }
    

    Does not seem to work as tabIndex property is missing.

    How to make selected row background-color changed?

    Reply
  • outdated/broken dependencies: Error: Cannot resolve module 'react/lib/ReactMount'
    outdated/broken dependencies: Error: Cannot resolve module 'react/lib/ReactMount'

    May 8, 2020

    Cloning and npm install ; npm start, I get this:

    $ npm install ; npm start
    npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
    npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm WARN deprecated [email protected]: [email protected]<2.6.8 is no longer maintained. Please, upgrade to [email protected] or at least to actual version of [email protected]
    npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules/chokidar/node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    npm WARN The package prop-types is included as both a dev and production dependency.
    
    added 479 packages from 364 contributors and audited 2961 packages in 10.24s
    
    2 packages are looking for funding
      run `npm fund` for details
    
    found 35 vulnerabilities (12 low, 22 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details
    
    > [email protected] start /tmp/react-treeview
    > NODE_ENV=development node server.js
    
    Listening at localhost:3000
    Hash: c2b9c2c74bdb4c783932
    Version: webpack 1.15.0
    Time: 1673ms
        Asset    Size  Chunks       Chunk Names
    bundle.js  1.5 MB       0       main
    chunk    {0} bundle.js (main) 1.39 MB [rendered]
    
    ERROR in ./demos/index.js
    Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
     @ ./demos/index.js 1:250-281
    
    ERROR in ./demos/controlled.js
    Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
     @ ./demos/controlled.js 1:250-281
    
    ERROR in ./demos/uncontrolled.js
    Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
     @ ./demos/uncontrolled.js 1:250-281
    
    ERROR in ./src/react-treeview.jsx
    Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/src
     @ ./src/react-treeview.jsx 1:250-281
    webpack: Failed to compile.
    

    I have tried a lot of things found around the web, like most things suggested here https://stackoverflow.com/questions/40652327/module-not-found-error-cannot-resolve-module-react-lib-reactmount which led to different errors, and trying to solve them trying things suggested here https://github.com/gaearon/react-hot-loader/issues/569 which led to different errors described here https://github.com/gaearon/react-hot-loader/issues/1411.

    Maybe it would be best if someone with actual knowledge about the npm ecosystem could update this repo. It seems quite outdated.

    Reply
  • Direct link for the demo
    Direct link for the demo

    Nov 24, 2021

    I discovered about this project just now and was looking for an example of how it looks.

    Opening the repo I noticed on the branches that there is something hosted on GitHub Pages

    I think it would be easier for newcomers to look at how the lib works if the GitHub Pages site was linked or in README or in the description to access it using just one click.

    On the repo description when you set up that there is an option to add a homepage.

    For agility sake there is the link: http://chenglou.github.io/react-treeview/

    Reply
  • Added bower badge to README.md
    Added bower badge to README.md

    Nov 13, 2014

                                                                                                                                                                                                           
    Reply
  • Fixed loading treeview as AMD-module
    Fixed loading treeview as AMD-module

    Sep 29, 2014

    Issue #11

                                                                                                                                                                                                           
    Reply
  • Move React from dependencies to peerDependencies
    Move React from dependencies to peerDependencies

    May 7, 2015

    Currently when i build/bundle my app i get two versions of React.. this causes a lot of bugs :(

    Reply
  • Unknown Prop 'defaultCollapsed' on <div> tag
    Unknown Prop 'defaultCollapsed' on
    tag

    Jul 27, 2016

    I am using the defaultCollapsed prop to set the initial state of the tree With react 15.2.1 I get the following console warning

    "Warning: Unknown prop defaultCollapsed on

    tag. Remove this prop from the element."

    This is due to the ...rest props passed into the arrow component

    Reply
  • add support for 0.14.0-rc1 now
    add support for 0.14.0-rc1 now

    Sep 8, 2015

    avoid

    npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
    npm ERR! peerinvalid Peer [email protected] wants [email protected]>=0.12.0
    

    error

    Reply
  • Improve styling
    Improve styling

    Oct 9, 2014

    Think the styling abilities should be improved. I have problem with it in my project now. I'll fork now and do my best - hope you will enjoy it :)

    Reply
  • Expand/collapse all nodes
    Expand/collapse all nodes

    Apr 11, 2014

    Is there a way to do this without moving state further up the hierarchy?

    Reply
  • Not rendering children if the tree node is collapsed
    Not rendering children if the tree node is collapsed

    Mar 13, 2016

    I noticed that when rendering larger trees with quite a few branches/nodes and quite a few dom elements in each of them, I would often run out of memory very quickly. Even if I started with defaultCollapsed={true}, all the children were still be rendered so it didn't matter.

    With this change, collapsed nodes don't render their children at all.

    I noticed that in your CSS you simply set height: 0 when the tree is collapsed. That's viable for smaller trees and it avoids an unnecessary rerender when the tree gets uncollapsed, but for very large trees it stops working very quickly.

    By very large tree I mean less than 300 nodes which when you think about it, isn't that big at all.

    Reply
  • Added jsx cli compilationcommand to readme
    Added jsx cli compilationcommand to readme

    Nov 14, 2014

    Just for beginning :)

                                                                                                                                                                                                           
    Reply
  • Only render visible nodes
    Only render visible nodes

    Aug 26, 2015

    While this is a simple example, I think a real world tree view has quite different requirements to be able to handle a big hierarchy.

    For example instead of the nested TreeViews an therefore divs, I would recommend flattening the output.

    Would you be interested to discuss and implement this, or do you want to keep this as straightforward as it is?

    Reply