npm_graph_component

Interactive 3D graph visualization in React

This reusable component renders a 3D force-directed graph to visualize hierarchical data and relationships between entities.

✨ Features

- 🔭 3D force-directed graph using react-force-graph-3d
- 📊 Data-driven approach - you provide the data
- ⚛️ Written in TypeScript with full type safety
- 📦 Ready to drop into any React 18+ app
- 🔄 Built-in refresh functionality

---

⚙️ Installation

``bash
npm install npm_graph_component
`

You also need to install the following peerDependencies in your project (if not already present):

`bash
npm install react react-dom
`

---

🚀 Quick Start

`tsx
import { GraphComponent, GraphResult } from "npm_graph_component";

const GraphCard = () => {
const [graphData, setGraphData] = useState({
nodes: [
{ id: "1", name: "Dealer A", type: "Dealer", __typename: "GraphNode" },
{ id: "2", name: "Compact", type: "Segment", adjustment: 0.15, __typename: "GraphNode" },
],
links: [
{ source: "1", target: "2", __typename: "GraphLink" }
],
__typename: "GraphResult"
});
const [loading, setLoading] = useState(false);

const handleRefetch = () => {
setLoading(true);
// Your data fetching logic here
// setGraphData(newData);
setLoading(false);
};

return (
graphData={graphData}
loading={loading}
refetch={handleRefetch}
/>
);
};

export default GraphCard;
`

---

📋 API Reference

$3

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| graphData | GraphResult | ✅ | The graph data containing nodes and links |
| loading | boolean | ✅ | Loading state indicator |
| refetch | () => void | ✅ | Function to refresh/refetch the data |

$3

`tsx
type GraphNodeType = "Dealer" | "Heading" | "Segment" | "Exact";

interface GraphNode {
id: string;
name: string;
type: GraphNodeType;
adjustment?: number;
__typename: "GraphNode";
}

interface GraphLink {
source: string;
target: string;
__typename: "GraphLink";
}

interface GraphResult {
nodes: GraphNode[];
links: GraphLink[];
__typename: "GraphResult";
}
`

---

🧪 What's Included

- GraphComponent: Main component that renders the 3D graph with your provided data
- UpdateSegmentsBridge: Helper component for updating segment data
- Type definitions: Full TypeScript support with exported interfaces

---

⚖️ Peer Dependencies

This package expects the following libraries to be present in your app:

`json
{
"peerDependencies": {
"react": ">=18.0.0 <20.0.0",
"react-dom": ">=18.0.0 <20.0.0"
}
}
`

react-force-graph-3d` is bundled internally, so no need to install it separately.

---

🪪 License

MIT — Pablo Brito