Package Exports

@naisutech/react-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@naisutech/react-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-tree

a hierarchical object tree component for React

demo

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, parent_id fields
root nodes have null on parent_id property
files should be a flat list of nodes on items property inside a node, but can be null
example:

[
  {
    "id": 12345678,
    "parent_id": null,
    "label": "My parent node",
    "items": [
      {
        "id": 87654321,
        "lavel": "My file",
        "parent_id": 12345678
      }
    ]
  },
  {
    "id": 56789012,
    "parent_id": 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