# react-tree-dnd

> **This README is not complete and is a work in progress.**

Latest version **2.0.9** (published 2022-02-25) · 0 weekly downloads

## Install

```sh
npm install react-tree-dnd
pnpm add react-tree-dnd
yarn add react-tree-dnd
bun add react-tree-dnd
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.9 |
| Published | 2022-02-25 |
| First published | 2021-10-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 34.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | antonio-costa |

## Links

- npm: https://www.npmjs.com/package/react-tree-dnd
- npm.io page: https://npm.io/package/react-tree-dnd

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.1.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [@types/node](https://npm.io/package/@types/node.md) ^12.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.0

## Recent versions

- 2.0.9 (latest) — 2022-02-25
- 2.0.8 — 2022-02-24
- 2.0.7 — 2022-02-24
- 2.0.6 — 2022-02-24
- 2.0.5 — 2022-02-24
- 2.0.4 — 2022-02-24
- 2.0.3 — 2022-02-24
- 2.0.2 — 2022-02-24
- 2.0.1 — 2022-02-24
- 2.0.0 — 2022-02-24
- 0.2.6 — 2021-11-10
- 0.2.5 — 2021-11-10
- 0.2.4 — 2021-11-03
- 0.2.3 — 2021-10-28
- 0.2.2 — 2021-10-28
- … 11 more at https://npm.io/package/react-tree-dnd/versions

## README

# README

**This README is not complete and is a work in progress.**

Simple drag and drop tree with infinite nesting

Highly optimized to handle thousands of entries (no state updates when dragging)

![ReactDnDTree Preview](preview.gif "ReactDnDTree Preview")

### To Do

- Add support for touch events
- Animations when dropping items

# Example

```css
.directory-drop-class {
  border: 1px solid blue;
}
```

```typescript
function App() {
  const [nodes, setNodes] = useState<TreeNode[]>([
    {
      id: "node1",
      title: "Node for node1",
    },
    {
      id: "node2",
      title: "Node with children",
      expanded: true,
      children: [
        {
          id: "node3",
          title: "Child Node",
        },
      ],
    },
  ]);

  const onChange = useCallback((change) => {
    setNodes((old) => applyTreeChange(change, old));
  }, []);

  return (
    <div className="App">
      <Droppable
        onChange={onChange}
        dropLineRenderer={({ injectedStyles }) => (
          <div
            style={{ height: 1, backgroundColor: "blue", ...injectedStyles }}
          />
        )}
        dragPreviewRenderer={() => (
          <div
            style={{
              width: 100,
              height: 100,
              background: "white",
              border: "1px solid black",
            }}
          >
            preview
          </div>
        )}
        directoryDropClass="directory-drop-class"
      >
        {({ injectDroppable, injectDraggable }: any) => (
          <ul {...injectDroppable}>
            {nodes.map((node) => (
              <DraggableStyled key={node.id} node={node} {...injectDraggable} />
            ))}
          </ul>
        )}
      </Droppable>
    </div>
  );
}

const DraggableStyled: React.FC<DraggableProps> = React.memo(
  ({ node, ...injectDraggable }) => {
    return (
      <Draggable node={node} {...injectDraggable}>
        <li>
          <div>{node.title}</div>
          {Array.isArray(node.children) && node.expanded
            ? node.children.map((child) => (
                <ul key={child.id}>
                  <DraggableStyled node={child} {...injectDraggable} />
                </ul>
              ))
            : null}
        </li>
      </Draggable>
    );
  }
);
```

# Types

```typescript
export interface TreeNode {
  id: string;
  title: string;
  data?: any;
  expanded?: boolean;
  children?: TreeNode[];
}
```

```typescript
export interface DroppableProps {
  dropLineRenderer: DropLineRenderer;
  dragPreviewRenderer?: DragPreviewRenderer;
  onChange: TreeOnChange;
  onBeforeDrop?: TreeOnBeforeDrop;
  directoryDropClass?: string;
  children: DroppableChildren;
}
```

```typescript
export interface DraggableProps {
  node: TreeNode;
  dragPreviewRenderer?: DragPreviewRenderer;
  dragHandleRef?: React.RefObject<any>;
  children: React.ReactNode;
}
```

---
_Source: https://npm.io/package/react-tree-dnd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._