@lincle/react-web-base v0.0.1

lincle generates a reactive graph.

Please see the various testing demos for examples.

If you require an interactive diagram, checkout @lincle/interactive.

Installation & Setup

Install @lincle/react-web-base and the peer dependencies react, react-dom:

npm install react react-dom @lincle/react-web-base

Also include the provided styles file. For example:

import '@lincle/react-web-base/dist/main.min.css';

Simple Example

The following example will generate this diagram:

CodeSandbox

/* styles.css */

.App {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border: 1px solid black;
	background-color: white;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.node-oval {
	border-radius: 50%;
}

import React, { FunctionComponent, ReactElement } from "react";
import { Edge, Edges, Graph, Node, Nodes } from "@lincle/react-web-base";
import "@lincle/react-web-base/dist/main.min.css";
import "./styles.css";

const App: FunctionComponent = (): ReactElement => {
  return (
    <div className="App">
      <Graph id="SimpleDiagram" key="1" nodeHeight={50} nodeWidth={50}>
        <Nodes>
          <Node id={1} key={1} x={50} y={50}>
            <div className="node">Node 1</div>
          </Node>
          <Node
            height={100}
            id={2}
            key={2}
            shape="oval"
            width={200}
            x={100}
            y={150}
          >
            <div className="node node-oval">Node 2</div>
          </Node>
          <Node id={3} key={3} shape="oval" x={150} y={350}>
            <div className="node node-oval">Node 3</div>
          </Node>
        </Nodes>
        <Edges>
          <Edge id={1} key={1} sourceId={1} targetId={2}>
            <circle fill="white" r="3" stroke="black" strokeWidth={2}>
              <title>Bridge</title>
            </circle>
          </Edge>
          <Edge id={2} key={2} line="direct" sourceId={2} targetId={3} />
        </Edges>
      </Graph>
    </div>
  );
};

export default App;

Component API's

* bolded parameters are required

<Graph>

<Nodes>

<Node>

<Edges>

<Edge>

*Note: The child of <Edge /> is intended to be an element at the center of the path. The child will be inside an <SVG /> element and should be an SVG type or wrapped in a <foreignObject /> element. See examples for details.*

Path function

Instead of using the @lincle/react-web-base provided edges (curve, line, & step), you may opt to generate your own path component:

(
	source: {
		height: number,
		id: string | number,
		shape: 'oval' | 'rectangle',
		width: number,
		x: number,
		y: number
	},
	target: {
		height: number,
		id: string | number,
		shape: 'oval' | 'rectangle',
		width: number,
		x: number,
		y: number
	},
	children?: ReactNode
) => Component<SVG type>

<Grid>

Contexts

<Context>'s can be taken advantage of to extend the functionality of @lincle/react-web-base: