# react-dnd-tree

> Drag and drop tree component for React using d3

Latest version **1.1.3** (published 2019-08-11) · ISC license · 0 weekly downloads

## Install

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

## 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 | 1.1.3 |
| Published | 2019-08-11 |
| First published | 2019-08-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 579.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | cobbles |

## Links

- npm: https://www.npmjs.com/package/react-dnd-tree
- Repository: https://github.com/JCobbles/react-dnd-tree
- Homepage: https://github.com/JCobbles/react-dnd-tree#readme
- Issues: https://github.com/JCobbles/react-dnd-tree/issues
- npm.io page: https://npm.io/package/react-dnd-tree

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^5.9.7
- [webpack](https://npm.io/package/webpack.md) ^4.38.0
- [dagre-d3](https://npm.io/package/dagre-d3.md) ^0.6.3

## Recent versions

- 1.1.3 (latest) — 2019-08-11
- 1.1.2 — 2019-08-11
- 1.1.1 — 2019-08-10
- 1.1.0 — 2019-08-05
- 1.0.15 — 2019-08-05
- 1.0.14 — 2019-08-02
- 1.0.13 — 2019-08-02
- 1.0.12 — 2019-08-01
- 1.0.11 — 2019-08-01
- 1.0.10 — 2019-08-01
- 1.0.9 — 2019-08-01
- 1.0.8 — 2019-08-01
- 1.0.7 — 2019-08-01
- 1.0.5 — 2019-08-01
- 1.0.4 — 2019-08-01
- … 4 more at https://npm.io/package/react-dnd-tree/versions

## README

# React drag-and-drop for directed graphs

## Features

- Represent any directed graph
  - Multiple root nodes possible
  - Nodes can have multiple parents
- Drag and drop node movement
- Edges between nodes can be drawn intuitively
- Edges can be deleted by selecting them and clicking the Delete key
- Graph can be panned and zoomed

![example directed graph](https://github.com/JCobbles/react-dnd-tree/raw/master/dag.png)


## Install
- `npm i --save react-dnd-tree`


## Usage

```
import DnDTree from 'react-dnd-tree'
```
### Using SSR (Server-Side Rendering)

```
function Component(props) {

  const DnDTree = require('react-dnd-tree').default
  return (
    <DnDTree
      nodes={model.nodes}
      edges={model.edges}
      height={400}
      edgeDraw
      errorHandler={errorHandler}
      updateHandler={updateHandler}
      edgeType='curve'
      onNodeSelected={nodeSelected}
    />
  )
}
```

#### Options

- `nodes`: list of node objects of format { label }
- `edges`: list of edge objects of format { from: int, to: int } where from, to are indices into the nodes list
- `edgeDraw`: default=True, whether you can draw edges between nodes
- `errorHandler`: callback function taking an error message
- `onNodeSelected`: callback function taking the selected node object
- `updateHandler`: callback taking (nodes, edges) every time the user updates the graph
- `edgeType`: (curve | line) the line interpolation style between nodes

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