Interactive 3D graph visualization component for React using Three.js and react-force-graph-3d
npm install npm_graph_componentInteractive 3D graph visualization in React
- ๐ญ 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
---
``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
---
`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 (
loading={loading}
refetch={handleRefetch}
/>
);
};
export default GraphCard;
`
---
| 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 |
`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";
}
`
---
- 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
---
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.
---
MIT โ Pablo Brito