react-network-graph-svg

A React component for rendering network graphs as SVG.

Installation

npm install @aimabel/react-network-graph-svg

Usage

import React from 'react';
import { NetworkGraphSVG, Node, Edge } from '@aimabel/react-network-graph-svg';

const nodes: Node[] = [
  { id: 1, label: 'Node 1', tier: 1 },
  { id: 2, label: 'Node 2', tier: 2 },
  { id: 3, label: 'Node 3', tier: 3 },
];

const edges: Edge[] = [
  { from: 1, to: 2 },
  { from: 2, to: 3 },
];

function App() {
  return (
    <NetworkGraphSVG
      nodes={nodes}
      edges={edges}
      width={400}
      height={400}
    />
  );
}

Props

NetworkGraphSVG

Prop	Type	Required	Default	Description
nodes	Node[]	Yes	-	Array of nodes to render
edges	Edge[]	Yes	-	Array of edges connecting nodes
width	number	No	400	Width of the SVG canvas
height	number	No	400	Height of the SVG canvas
defaultNode	object	No	See below	Default styling for nodes
defaultEdge	object	No	See below	Default styling for edges

Node

Prop	Type	Required	Default	Description
id	number	Yes	-	Unique identifier
label	string	Yes	-	Text label to display
title	string	No	-	Tooltip text
shapeType	'circle' | 'square'	No	'circle'	Shape of the node
lineColor	string	No	'#000'	Border color
lineWidth	number	No	1	Border width
fillColor	string	No	'#fff'	Fill color
tier	number	No	3	Positioning tier (1=inner, 2=middle, 3=outer)
onClick	() => void	No	-	Click handler

Edge

Prop	Type	Required	Default	Description
from	number	Yes	-	Source node ID
to	number	Yes	-	Target node ID
label	string	No	-	Edge label
title	string	No	-	Tooltip text
lineColor	string	No	'#000'	Line color
lineWidth	number	No	1	Line width
onClick	() => void	No	-	Click handler

Default Styles

// Default node styling
defaultNode: {
  shapeType: 'circle',
  lineColor: '#000',
  lineWidth: 1,
  fillColor: '#fff',
}

// Default edge styling
defaultEdge: {
  lineColor: '#000',
  lineWidth: 1,
}

License

MIT