1.1.3 • Published 5 years ago
react-dnd-tree v1.1.3
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
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 listedgeDraw
: default=True, whether you can draw edges between nodeserrorHandler
: callback function taking an error messageonNodeSelected
: callback function taking the selected node objectupdateHandler
: callback taking (nodes, edges) every time the user updates the graphedgeType
: (curve | line) the line interpolation style between nodes
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago