dnd-dynamic-tree

A powerful, flexible, and easy-to-use React tree component with drag-and-drop functionality built on top of @dnd-kit.

✨ Features

• 🎯 Drag & Drop: Full drag-and-drop support with visual feedback
• 📁 Nested Trees: Support for unlimited nesting levels
• 🎨 Customizable: Completely customizable appearance via CSS
• 🔧 TypeScript: Written in TypeScript with full type safety
• ⚡ Performance: Optimized rendering and smooth animations
• 🧩 Flexible: Works with any data structure
• 📱 Accessible: Built with accessibility in mind
• 🎭 Two Styles: Simple and folder-style tree components included

🚀 Quick Start

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

import { SortableTree, SimpleTreeItemWrapper } from 'dnd-dynamic-tree'

function MyTree() {
  const [items, setItems] = useState([
    { id: '1', value: 'Home', children: [{ id: '4', value: 'Documents' }] },
    { id: '2', value: 'Work' },
    { id: '3', value: 'Personal', canHaveChildren: false },
  ])

  const TreeItemComponent = React.forwardRef((props, ref) => (
    <SimpleTreeItemWrapper {...props} ref={ref}>
      <div>{props.item.value}</div>
    </SimpleTreeItemWrapper>
  ))

  return (
    <SortableTree
      items={items}
      onItemsChanged={setItems}
      TreeItemComponent={TreeItemComponent}
    />
  )
}

🛠 Development

Check out the Storybook for code samples and play around. You could also play with it on CodeSandbox

Prerequisites

• Node.js 18+
• npm or pnpm

Development Setup

1. Clone the repository

   git clone https://github.com/shantanusoam/dnd-dynamic-tree.git
   cd dnd-dynamic-tree

2. Install dependencies

   npm install

3. Start the development demo

   npm run dev

   This will start a demo application at http://localhost:5173 where you can see and test the library in action.

4. Start Storybook

   npm run storybook

   This will start Storybook at http://localhost:6006 with interactive examples and documentation.

Available Scripts

• npm run dev - Start development demo
• npm run storybook - Start Storybook development server
• npm run build - Build the library for production
• npm run build:lib - Build only the library
• npm run build:demo - Build the demo application
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues

Project Structure

dnd-dynamic-tree/
├── lib/                    # Library source code
│   ├── dynamic-Tree/       # Main library components
│   │   ├── index.ts        # Main exports
│   │   ├── SortableTree.tsx
│   │   ├── ui/             # UI components
│   │   └── types.ts        # TypeScript types
│   └── main.ts             # Library entry point
├── src/                    # Development/demo code
│   ├── App.tsx             # Demo application
│   ├── stories/            # Storybook stories
│   └── index.css
├── dist/                   # Built library output
└── package.json

📖 Examples

The library includes several example implementations:

Simple Tree Style

import { SortableTree, SimpleTreeItemWrapper } from 'dnd-dynamic-tree'

const SimpleTreeComponent = React.forwardRef((props, ref) => (
  <SimpleTreeItemWrapper {...props} ref={ref}>
    <div style={{ padding: '8px 12px' }}>
      {props.item.value}
    </div>
  </SimpleTreeItemWrapper>
))

<SortableTree
  items={treeData}
  onItemsChanged={setTreeData}
  TreeItemComponent={SimpleTreeComponent}
  indentationWidth={20}
/>

Folder Tree Style

import { SortableTree, FolderTreeItemWrapper } from 'dnd-dynamic-tree'

const FolderTreeComponent = React.forwardRef((props, ref) => (
  <FolderTreeItemWrapper {...props} ref={ref}>
    <div style={{ padding: '8px 12px' }}>
      {props.item.value}
    </div>
  </FolderTreeItemWrapper>
))

<SortableTree
  items={treeData}
  onItemsChanged={setTreeData}
  TreeItemComponent={FolderTreeComponent}
  indentationWidth={25}
/>

📚 Documentation

For complete documentation and API reference, check out:

• Storybook: Interactive examples at http://localhost:6006 (after running npm run storybook)
• Development Demo: Live demo at http://localhost:5173 (after running npm run dev)
• Source Code: Well-documented TypeScript source in the lib/ directory

🎯 Use Cases

• File Explorers: Organize files and folders with drag-and-drop
• Task Management: Manage tasks and projects hierarchically
• Navigation Menus: Create dynamic, reorderable navigation structures
• Content Management: Organize content categories and items
• Data Organization: Any hierarchical data that needs reordering

🤝 Contributing

Contributions are welcome! The development setup is now properly configured:

1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/dnd-dynamic-tree.git
3. Install dependencies: npm install
4. Start development: npm run dev
5. Start Storybook: npm run storybook
6. Make your changes and test thoroughly
7. Submit a pull request

📄 License

MIT © Shantanu Soam