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

npm install npm_graph_component

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

npm install react react-dom

🚀 Quick Start

import { GraphComponent, GraphResult } from "npm_graph_component";

const GraphCard = () => {
  const [graphData, setGraphData] = useState<GraphResult>({
    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 (
    <GraphComponent 
      graphData={graphData}
      loading={loading}
      refetch={handleRefetch}
    />
  );
};

export default GraphCard;

📋 API Reference

GraphComponent Props

| 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 |

Data Types

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:

{
  "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