york-ie-labs / resource-tree

Tree structure visualized as a table. Click directories to move down into the tree, drag and drop to move directories and resources.

resource-tree

Tree structure visualized as a table. Click directories to move down into the tree, drag and drop to move directories and resources.

Install

yarn add @york-ie-labs/resource-tree

Dependencies

react-dnd

resource-tree depends on react-dnd. Since react-dnd can only have a single context in an app, where you wrap the resource-tree with DnD is up to your project implementation.

react-bootstrap-icons

resource-tree uses react-bootstrap-icons by default.

Usage

import React, { useRef, useState } from 'react'
import { ResourceTree } from '@york-ie-labs/resource-tree'
import { DndProvider, createDndContext } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

import './App.css'

const initial = {
  label: 'home',
  children: [
    {
      type: 'directory',
      label: 'Personal Files',
      description: '',
      children: [
        {
          type: 'object',
          label: 'Interesting Tech',
          description: 'Notes on some companies and products'
        },
      ]
    },
  ]
}

function App() {
  const [tree, setTree] = useState(initial)
  const manager = useRef(RNDContext)
  return (
    <div className='app'>
      <DndProvider manager={manager.current.dragDropManager}>
        <ResourceTree tree={tree} setTree={setTree} />
      </DndProvider>
    </div>
  )
}

Props

Props	Required	Description
tree	True	The JSON tree structure to visualize. Each node under the root node must have a type key with a value of directory or object. Nodes of directory type must have children property with an Array as the value.
setTree	True	Update function to update the tree object
className	False	Optional class names to append to the resource-tree table element

License

MIT © York IE Labs