Top
TreeView - Getting started
TreeView
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <TreeView /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/TreeView and @zippytech/react-toolkit/TreeView/index.css.
This is the most basic setup for a <TreeView />. In the following sections we'll explore how to use the <TreeView /> in various scenarios, styling and supported props.
In the example above, we've specified defaultCollapsed in order to have some tree nodes render collapsed by default. Skip that if you don't want this behaviour.
Try using keyboard arrow up/down to navigate between tree nodes and arrow right/left to expand/collapse non-leaf nodes. For more details, see the Keyboard navigation page.
Probably the most important prop of the <TreeView /> is the dataSource - an array with objects that have label and nodes properties. Further, the nodes property should be an array of the same shape - ad infinitum.
The label property of nodes in the dataSource doesn't have to be a string - it can be any valid React.Node (anything renderable by React). It can even be a function (will be called with the nodeProps object) that should return a valid React.Node.
Async tree nodes are another highlight feature of the <TreeView />, so here's a basic demo of it:
Another very important concept to understand is how node paths are built and can be used, so make sure you continue by reading the Using node path property page.