dnd-kit-tree

A React-based project utilizing dnd-kit to create a customizable and interactive tree component for drag-and-drop functionality.

Features

• Drag-and-drop support for tree nodes.
• Customizable node rendering.
• Lightweight and performant.

Demo

View Demo

Installation

npm install dnd-kit-tree @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Example

import { useState } from "react";
import { SortableTree, TreeItems } from "dnd-kit-tree";

type Data = {
  label: string;
};

const MyComponent = () => {
  const [value, setValue] = useState<TreeItems<Data>>([
    {
      id: "id-1",
      data: { label: "Item 1" },
      children: [
        {
          id: "id-2",
          data: { label: "Item 2" },
          children: [
            {
              id: "id-3",
              children: [],
              data: { label: "Item 3" },
            },
          ],
        },
      ],
    },
    {
      id: "id-4",
      children: [],
      data: { label: "Item 4" },
    },
    {
      id: "id-5",
      children: [],
      data: { label: "Item 5" },
    },
  ]);

  return (
    <SortableTree
      removable
      collapsible
      value={value}
      onChange={setValue}
      indentationWidth={25}
      renderItemContent={(item) => <div>{item.data?.label}</div>}
    />
  );
};

Props

Prop	Type	Default	Description
value	TreeItems<T>	[]	The tree data structure representing the nodes.
maxDepth	number	undefined	The maximum depth of the tree. (undefined = Infinity)
grabbingCursor	string	grabbing	The cursor style when dragging a tree node.
onChange	(items: TreeItems<T>) => void	undefined	Callback function triggered when the tree structure changes.
onMove	(action: SortableTreeMove) => void	undefined	Callback function triggered when a node is moved.
removable	boolean	false	Enables the ability to remove tree nodes.
collapsible	boolean	false	Enables the ability to collapse/expand tree nodes.
indentationWidth	number	25	The width of indentation for child nodes in pixels.
adjustTranslateY	number	0	Adjusts the vertical position of the dragged node.
virtual	SortableTreeVirtualProps	undefined	Enables virtualization of the tree.
renderItem	(props: RenderItemProps<T>) => React.ReactNode	undefined	Function to customize the rendering of tree nodes.
renderItemContent	(item: FlattenedItem<T>) => React.ReactNode	undefined	Function to customize the rendering of tree node content.

CSS Class Names

• dnd-tree-item
• dnd-tree-item-clone
• dnd-tree-item-indicator
• dnd-tree-item-container
• dnd-tree-item-container-clone
• dnd-tree-item-container-indicator
• dnd-tree-item-content
• dnd-tree-item-children-count
• dnd-tree-item-actions
• dnd-tree-item-action-handle
• dnd-tree-item-action-collapse
• dnd-tree-item-action-collapsed
• dnd-tree-item-action-delete

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.