{"_id":"@aimabel/react-network-graph-svg","_rev":"2-0837ff680cea7a32120abddbe83ab8ce","name":"@aimabel/react-network-graph-svg","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aimabel/react-network-graph-svg","version":"1.0.0","keywords":["react","network","graph","svg","visualization"],"author":"","license":"ISC","_id":"@aimabel/react-network-graph-svg@1.0.0","maintainers":[{"name":"tomsoderlund","email":"tom@tomsoderlund.com"}],"dist":{"shasum":"882d28d8c455ad1bc2d6e85d384aefdc5e294f53","tarball":"https://registry.npmjs.org/@aimabel/react-network-graph-svg/-/react-network-graph-svg-1.0.0.tgz","fileCount":11,"integrity":"sha512-8mHYVkfjylU/gR00fkikvWUtjDur9MhxQmTg5aDmfpW162X/0Qosn669vWfGlYAVWu3VzfzK9KXMM/yZCw3+vg==","signatures":[{"sig":"MEQCIAblF1XqUVQF4LpzHlCnwHir4ebQRPXWVCvPm6yLQA+6AiBY39Tcql03GPt1mM9ynCW4t4ROLZub6vDrnEqX9PBxkA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15550},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"c71f1c8893137f1ce7d29af2ec6b60744bc49129","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc -p tsconfig.build.json"},"_npmUser":{"name":"tomsoderlund","actor":{"name":"tomsoderlund","type":"user","email":"tom@tomsoderlund.com"},"email":"tom@tomsoderlund.com"},"_npmVersion":"10.2.3","description":"A React component for rendering network graphs as SVG","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-network-graph-svg_1.0.0_1751981354284_0.2720782374238948","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-08T13:29:14.172Z","modified":"2025-07-08T15:54:41.648Z","1.0.0":"2025-07-08T13:29:14.455Z"},"license":"ISC","keywords":["react","network","graph","svg","visualization"],"description":"A React component for rendering network graphs as SVG","maintainers":[{"email":"nicolas@aimabel.ai","name":"nirol00"},{"email":"tom@tomsoderlund.com","name":"tomsoderlund"}],"readme":"# @aimabel/react-network-graph-svg\n\nA React component for rendering network graphs as SVG.\n\n## Installation\n\n```bash\nnpm install @aimabel/react-network-graph-svg\n```\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport { NetworkGraphSVG, Node, Edge } from '@aimabel/react-network-graph-svg';\n\nconst nodes: Node[] = [\n  { id: 1, label: 'Node 1', tier: 1 },\n  { id: 2, label: 'Node 2', tier: 2 },\n  { id: 3, label: 'Node 3', tier: 3 },\n];\n\nconst edges: Edge[] = [\n  { from: 1, to: 2 },\n  { from: 2, to: 3 },\n];\n\nfunction App() {\n  return (\n    <NetworkGraphSVG\n      nodes={nodes}\n      edges={edges}\n      width={400}\n      height={400}\n    />\n  );\n}\n```\n\n## Props\n\n### NetworkGraphSVG\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `nodes` | `Node[]` | Yes | - | Array of nodes to render |\n| `edges` | `Edge[]` | Yes | - | Array of edges connecting nodes |\n| `width` | `number` | No | `400` | Width of the SVG canvas |\n| `height` | `number` | No | `400` | Height of the SVG canvas |\n| `defaultNode` | `object` | No | See below | Default styling for nodes |\n| `defaultEdge` | `object` | No | See below | Default styling for edges |\n\n### Node\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `id` | `number` | Yes | - | Unique identifier |\n| `label` | `string` | Yes | - | Text label to display |\n| `title` | `string` | No | - | Tooltip text |\n| `shapeType` | `'circle' \\| 'square'` | No | `'circle'` | Shape of the node |\n| `lineColor` | `string` | No | `'#000'` | Border color |\n| `lineWidth` | `number` | No | `1` | Border width |\n| `fillColor` | `string` | No | `'#fff'` | Fill color |\n| `tier` | `number` | No | `3` | Positioning tier (1=inner, 2=middle, 3=outer) |\n| `onClick` | `() => void` | No | - | Click handler |\n\n### Edge\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `from` | `number` | Yes | - | Source node ID |\n| `to` | `number` | Yes | - | Target node ID |\n| `label` | `string` | No | - | Edge label |\n| `title` | `string` | No | - | Tooltip text |\n| `lineColor` | `string` | No | `'#000'` | Line color |\n| `lineWidth` | `number` | No | `1` | Line width |\n| `onClick` | `() => void` | No | - | Click handler |\n\n## Default Styles\n\n```tsx\n// Default node styling\ndefaultNode: {\n  shapeType: 'circle',\n  lineColor: '#000',\n  lineWidth: 1,\n  fillColor: '#fff',\n}\n\n// Default edge styling\ndefaultEdge: {\n  lineColor: '#000',\n  lineWidth: 1,\n}\n```\n\n## License\n\nMIT ","readmeFilename":"README.md"}