React DnD Diagrams

A customizable React drag and drop NPM package for building interactive diagrams. This is the most powerful and developer friendly visual diagram builder for your app.

| Overview | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | |

Live Demo

Check out the live demo here: https://github.com/tharindukumarasiri.github.io/react-dnd-diagrams (Source Code)

Installation

The easiest way to use React DnD Diagram is to install it from NPM and include it in your own React build process.

npm install react-dnd-diagrams --save

Usage

Require the DnDFlow component and render it with JSX:

import React from "react";
import { render } from "react-dom";

import DnDFlow from "react-dnd-diagrams";

const Categories = {
  SHAPES: "Shapes",
  STRUCTURES: "Other",
};

const parentNodes = ["Table", "LineChart"];

const ShapesData = {
  Square: {
    image: (
      <rect
        x="0.5"
        y="0.5"
        width="25"
        height="25"
        vectorEffect="non-scaling-stroke"
      />
    ),
    viewBox: "0 0 26 26",
    category: [Categories.SHAPES],
    keepAspectRatio: false,
  },
  Table: {
    image: (
      <>
        <g>
          <path d="M245.9,5.2v89.7H4.7V5.2H245.9 M246.9,4.2H3.7v91.7h243.1V4.2L246.9,4.2z" />
        </g>
        <g>
          <line class="st0" x1="59.5" y1="4.8" x2="59.5" y2="95" />
        </g>
        <g>
          <line class="st0" x1="158" y1="4.8" x2="158" y2="95" />
        </g>
        <line class="st0" x1="4.6" y1="21.2" x2="246.4" y2="21.2" />
      </>
    ),
    viewBox: "0 0 251 101",
    size: { width: 100, height: 100 },
    keepAspectRatio: false,
    hideTextInput: true,
    hideShape: true,
    category: [Categories.STRUCTURES],
  },
};

const App = (props) => {
  return (
    <div>
      <DnDFlow
        categories={Categories}
        parentNodes={parentNodes}
        shapesData={ShapesData}
        DrawingContent={null}
        saveDiagram={(data) => {
          console.log(data);
        }}
      />
    </div>
  );
};

render(<App />, document.getElementById("app"));

See the example source for a reference implementation.

Properties

| property | type | description | | ------------------ | -------------------------------------------- | ------------------------------------------------------------- | | DrawingContent | Object data | Takes the design JSON and loads it in the canvas | | saveDiagram | Function callback | Returns the design JSON in a callback function | | categories | Object {[key]: id :[value]: category name} | Categories of of shapes in sidebar | | shapesData | Object {[key]: name :[value]: shape props} | Shape data including the SVG | | parentNodes | Array | Node names that has the ability to group(act as parent nodes) |

Shape Properties

All shapes are used from SVG format, please remove the <svg> tag and add the viewBox values as given in the example above.

• image {<HTMLElement>} svg of the shape without the tag and other elements outside of the tag
• viewBox {String} viewBox of the svg
• category {Array} list of category ids, to include inside of the categories
• size {Object { width: number, height: number }} Size of the shape when initially dropped (optional)
• keepAspectRatio {Boolean} (default: true) ability to keep the aspect ratio when resizing (optional)
• hideTextInput {Boolean} (default: false) hide the text input inside of the shape
• hideShape {Boolean} (default: false) hide svg shape

Tools and options

Image upload

Layers

*This library is in early stages more features and customization coming soon.

All bug reports and PRs are appreciated

License

Copyright (c) 2024 [MIT] Licensed.