React DnD TreeView

To allow dropping files or elements from outside the DndProvider into the tree:

1. Set extraAcceptTypes to include the drag type of the external source (e.g., NativeTypes.FILE from react-dnd-html5-backend).
2. In onDrop, use options.monitor to access the dropped item's data.

Example for dropping files:

import { NativeTypes } from "react-dnd-html5-backend";

const handleDrop = (tree, options) => {
  const { dropTargetId, monitor } = options;
  const itemType = monitor.getItemType();

  if (itemType === NativeTypes.FILE) {
    const files = monitor.getItem().files;
    const nodes = files.map((file, index) => ({
      id: lastId + index,
      parent: dropTargetId,
      text: file.name,
    }));

    return [...tree, ...nodes];
  }
  return tree;
};

return (
  <Tree
    {...props}
    tree={treeData}
    extraAcceptTypes={[NativeTypes.FILE]}
    onDrop={handleDrop}
  />
);

You can choose different backends depending on your device support needs:

• MultiBackend: Supports both touch and pointer devices. Requires getBackendOptions() to configure sub-backends.
• HTML5Backend: Standard for desktop/pointer devices.
• TouchBackend: For touch-based devices.

When using MultiBackend, you can pass specific options for both touch and html5 via getBackendOptions(multiOptions).

import { DndProvider } from "react-dnd";
import { HTML5Backend, HTML5BackendOptions } from "react-dnd-html5-backend";
import {TouchBackend, TouchBackendOptions} from "react-dnd-touch-backend"
import {Tree, MultiBackend, getBackendOptions} from "@minoru/react-dnd-treeview"

const touchOptions: Partial<TouchBackendOptions> = {
  // some options
};

const html5Options: Partial<HTML5BackendOptions> = {
  rootElement: document.body,
  // some options
};

const multiOptions = {
  touch: touchOptions,
  html5: html5Options,
}

function App() {
  return (
    <DndProvider
      backend={MultiBackend}
      options={getBackendOptions(multiOptions)}
    >
      <Tree {...someProps} />
    </DndProvider>
  );
}

You can style the tree structure using the classes prop. This prop accepts an object where keys represent specific areas of the tree. Some keys support callback functions for dynamic styling based on node properties like depth.

Available Class Keys:

• root: Top-level container (ul).
• container: Element wrapping nodes of the same hierarchy (ul).
• listItem: Element wrapping each node (li). Supports a function: (node, options) => string.
• dropTarget: Area that can be dropped into during dragging.
• draggingSource: The node currently being dragged.
• placeholder: Element wrapping the placeholder (li).

<Tree
  {...props}
  classes={{
    root: "my-root-classname",
    dragOver: "my-dragover-classname",
    listItem: (node, options) => {
      return options.depth === 0
        ? "my-listitem-root-classname"
        : "my-listitem-classname";
    },
  }}
/>

To use the Tree component, wrap it in a DndProvider from react-dnd. You must provide a backend (like MultiBackend, HTML5Backend, or TouchBackend) and an onDrop handler to update your tree state. The render prop allows you to define how each node looks, providing access to depth, isOpen, and onToggle.

import { useState } from "react";
import {
  Tree,
  getBackendOptions,
  MultiBackend,
} from "@minoru/react-dnd-treeview";
import { DndProvider } from "react-dnd";
import initialData from "./sample-default.json";

function App() {
  const [treeData, setTreeData] = useState(initialData);
  const handleDrop = (newTreeData) => setTreeData(newTreeData);

  return (
    <DndProvider backend={MultiBackend} options={getBackendOptions()}>
      <Tree
        tree={treeData}
        rootId={0}
        onDrop={handleDrop}
        render={(node, { depth, isOpen, onToggle }) => (
          <div style={{ marginLeft: depth * 10 }}>
            {node.droppable && (
              <span onClick={onToggle}>{isOpen ? "[-]" : "[+]"}</span>
            )}
            {node.text}
          </div>
        )}
      />
    </DndProvider>
  );
}

The Tree component is the primary interface for the library. It accepts several props to control data, rendering, and drag-and-drop behavior.

Required Props

• tree: An array representing the tree structure (node data).
• rootId: The number | string ID of the root node (the parent ID of the shallowest displayed node).
• render: A function used to render each node.
• onDrop: A function callback triggered when the tree state changes due to drag-and-drop.

Key Optional Props

• extraAcceptTypes: An array of drag types allowed to be dropped from outside the tree.
• classes: An object containing CSS class names for specific tree areas.
• sort: Controls child node order. true (default) sorts by text property; false follows array order; or a custom callback function.
• initialOpen: boolean (if true, all parents open) or array of node IDs to initialize in the open state.
• canDrag: Callback to determine if a node is draggable.
• canDrop: Callback to override default drop rules.
• dragPreviewRender: Custom render function for the drag preview (essential for touch device support).
• placeholderRender: Render function for the drop destination placeholder.
• dropTargetOffset: number specifying the effective drop range in pixels.