GraphCanvas

Main entry point for reagraph. Wraps the Three.js canvas, scene, camera controls, and lasso selection into a single component. Pass nodes and edges data along with layout, theme, and interaction configuration.

Import

import { GraphCanvas } from 'reagraph';

GraphCanvas Props

Data

Layout & Sizing

Appearance

Camera

Interaction

Custom Rendering

Event Callbacks

Ref Methods (GraphCanvasRef)

Access via useRef<GraphCanvasRef>():

Basic Usage

import { GraphCanvas } from 'reagraph';

<GraphCanvas
  nodes={[
    { id: '1', label: 'Node 1' },
    { id: '2', label: 'Node 2' },
  ]}
  edges={[
    { id: 'e1', source: '1', target: '2', label: 'connects' },
  ]}
/>

With Ref

import { GraphCanvas, GraphCanvasRef } from 'reagraph';

const ref = useRef<GraphCanvasRef>(null);

<GraphCanvas ref={ref} nodes={nodes} edges={edges} />

// Later:
ref.current?.centerGraph();
ref.current?.fitNodesInView(['1', '2']);

Dark Theme

import { GraphCanvas, darkTheme } from 'reagraph';

<GraphCanvas nodes={nodes} edges={edges} theme={darkTheme} />

3D Layout

<GraphCanvas
  nodes={nodes}
  edges={edges}
  layoutType="forceDirected3d"
  cameraMode="orbit"
/>

Draggable Nodes

<GraphCanvas
  nodes={nodes}
  edges={edges}
  draggable
  onNodeDragged={(node) => console.log('Dragged:', node.id)}
/>