tree

A hierarchical object tree component for React

Feb 15, 2020
A hierarchical object tree component for React

react-tree

hierarchical object tree component for React.

react-tree-demo

View Demo View Github

  • supports dark (default) and light theme
  • supports three sizes: full width, half width and narrow (33%)
  • optimized UX to clearly indicate open/closed folders, selected items and reactions to user input
  • optimized for long object labels: ellipsis when labels become too large for container
  • optimized for deeply nested structures: container becomes scrollable when nested items might become hidden outside of container
  • stylable: provide override CSS with suitable selectors (see Tree.scss for reference)
  • will show loading progress if data not supplied or not ready

add to a project

yarn add @naisutech/react-tree or npm install @naisutech/react-tree

usage

import Tree from '@naisutech/react-tree' // component code const data = ... // fetch data const onSelect = selectedNode => { // do something with selected node } <Tree nodes={data} onSelect={onSelect} />

data format

  • data should be a flat list of nodes with at least label, id, parentId fields
  • root nodes have null on parentId property
  • files should be a flat list of nodes on items property inside a node, but can be null
  • example:
[ { "id": 12345678, "parentId": null, "label": "My parent node", "items": [ { "id": 87654321, "lavel": "My file", "parentId": 12345678 } ] }, { "id": 56789012, "parentId": 12345678, "label": "My child node", "items": null } ]

api

<Tree nodes={Array} // see data format onSelect={Function} // fired every click of node or leaf with selected item as argument darkMode={Boolean} // true (default), false size={String} // full (default), half, narrow />

contributing

open issues and PRs and we'll work together

GitHub

Recommended