React Connected Nodes

Simple graph engine for react.

Installation

npm install react-connected-ndoes

Usage

The ConnectedNodesProvider is needed to set up the graph engine. Next, the ConnectedNodes object contains a Container, Node and Connector component to help you setup a graph.

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ConnectedNodes as RCN, ConnectedNodesProvider } from '../src/index';

const node: React.CSSProperties = {
  backgroundColor: '#1864AB',
  color: '#fff',
  fontFamily: 'monospace',
  textTransform: 'uppercase',
  fontSize: 18,
  padding: 16,
  borderRadius: 16,
};

const stroke = {
  ['stroke.color']: '#444',
  ['stroke.width']: 2,
};

const App = () => {
  return (
    <ConnectedNodesProvider>
      <RCN.Container
        style={{
          backgroundColor: '#111',
          boxShadow: '12px 12px 32px #000',
          height: '60vh',
          padding: 100,
          margin: 100,
          border: '1px solid #111',
          borderRadius: 16,
          userSelect: 'none',
        }}
      >
        <RCN.Node _id={1} style={{ ...node, left: 700, top: 100 }}>
          Node 1
        </RCN.Node>

        <RCN.Node
          _id={2}
          style={{
            ...node,
            left: 400,
            top: 400,
          }}
        >
          Node 2
        </RCN.Node>

        <RCN.Node _id={3} style={{ ...node, left: 1000, top: 400 }}>
          Node 3
        </RCN.Node>

        <RCN.Node _id={4} style={{ ...node, left: 300, top: 700 }}>
          Node 4
        </RCN.Node>

        <RCN.Node _id={5} style={{ ...node, left: 500, top: 700 }}>
          Node 5
        </RCN.Node>

        <RCN.Node _id={6} style={{ ...node, left: 900, top: 700 }}>
          Node 6
        </RCN.Node>

        <RCN.Node _id={7} style={{ ...node, left: 1100, top: 700 }}>
          Node 7
        </RCN.Node>

        <RCN.Connector from={1} to={3} extra={stroke} />
        <RCN.Connector from={1} to={2} extra={stroke} />

        <RCN.Connector from={2} to={4} extra={stroke} />
        <RCN.Connector from={2} to={5} extra={stroke} />

        <RCN.Connector from={3} to={6} extra={stroke} />
        <RCN.Connector from={3} to={7} extra={stroke} />
      </RCN.Container>
    </ConnectedNodesProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));