Draggable, Selectable, Accessible Tree Component - React Complex Tree

Description:

This is an unopinionated accessible tree component with support for live search, multi selection, and drag’n’drop.

Basic usage:

1. Install and import the React Complex Tree component into your project.

# Yarn
$ yarn add react-complex-tree
# NPM
$ npm install react-complex-tree

import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree';
import 'react-complex-tree/lib/style-modern.css';

2. Define your tree data and render it in the complex tree component.

function App() {
  const items = {
    root: {
      index: 'root',
      isFolder: true,
      children: ['child1', 'child2'],
      data: 'Root item',
    },
    child1: {
      index: 'child1',
      children: [],
      data: 'Child item 1',
    },
    child2: {
      index: 'child2',
      isFolder: true,
      children: ['child3'],
      data: 'Child item 2',
    },
    child3: {
      index: 'child3',
      children: [],
      data: 'Child item 3',
    },
  };
  const dataProvider = new StaticTreeDataProvider(items, (item, newName) => ({ ...item, data: newName }));
  return (
    <UncontrolledTreeEnvironment
      dataProvider={dataProvider}
      getItemTitle={item => item.data}
      viewState={{}}
      canDragAndDrop={true}
      canDropOnFolder={true}
      canReorderItems={true}
    >
      <Tree treeId="tree-2" rootItem="root" treeLabel="Tree Example" />
    </UncontrolledTreeEnvironment>
  );
}