react-node-diagrams 📊
React components for building dynamic node diagrams
Install
npm install --save react-node-diagrams
Usage
See /src/example
for a demo app.
Before using the node diagram, you have to register the components that will be
used using the registeredComponents prop of the DiagramProvider component. The
prop takes either an array of components or a keyed object (which it runs
Object.values
on). You can create your own custom components or register the
default components.
Be sure to wrap all of the components that React Node Diagrams exports in the
<DiagramProvider>
The Library component serves as the place you can pull components out of. The Config component makes it easy to set component configuration.
The Canvas component is where components are dragged to and connected.
import React Component from "react";import Library DiagramProvider DiagramContext Canvas Config defaultComponents from "react-node-diagrams"; { return <DiagramProvider => <div => <div = ="component-area"> <DiagramContext.Consumer> selectedComponent selectedComponent ? <Config /> : <Library /> </DiagramContext.Consumer> </div> <div = ="canvas-area"> <Canvas /> </div> </div> </DiagramProvider> ; }
License
MIT © alexanderson1993