### Install Reagraph Package

Source: https://github.com/reaviz/reagraph/blob/master/README.md

Instructions for adding the Reagraph library to your project using common package managers like NPM or Yarn.

```bash
npm i reagraph --save
```

```bash
yarn add reagraph
```

--------------------------------

### Interact with GraphCanvas via Ref

Source: https://github.com/reaviz/reagraph/blob/master/CLAUDE.md

Shows how to use a React ref to access the GraphCanvas API. This allows for programmatic control over camera movement, zooming, and canvas exporting.

```typescript
const graphRef = useRef<GraphCanvasRef>(null);

// Available methods:
graphRef.current?.centerGraph(nodeIds, opts);
graphRef.current?.fitNodesInView(nodeIds, opts);
graphRef.current?.zoomIn();
graphRef.current?.zoomOut();
graphRef.current?.getGraph();
graphRef.current?.getControls();
graphRef.current?.exportCanvas();
```

--------------------------------

### Apply Themes to GraphCanvas (TypeScript)

Source: https://context7.com/reaviz/reagraph/llms.txt

Demonstrates how to apply built-in light and dark themes, or a fully custom theme, to the GraphCanvas component. Custom themes allow fine-grained control over the appearance of all graph elements.

```tsx
import { GraphCanvas, lightTheme, darkTheme } from 'reagraph';

// Use built-in dark theme
<GraphCanvas theme={darkTheme} nodes={nodes} edges={edges} />

// Custom theme
const customTheme = {
  canvas: {
    background: '#1E2026',
    fog: '#1E2026'
  },
  node: {
    fill: '#7A8C9E',
    activeFill: '#1DE9AC',
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.2,
    label: {
      color: '#ACBAC7',
      stroke: '#1E2026',
      activeColor: '#1DE9AC'
    }
  },
  edge: {
    fill: '#474B56',
    activeFill: '#1DE9AC',
    opacity: 1,
    selectedOpacity: 1,
    inactiveOpacity: 0.1,
    label: {
      color: '#ACBAC7',
      stroke: '#1E2026',
      activeColor: '#1DE9AC',
      fontSize: 6
    }
  },
  ring: { fill: '#54616D', activeFill: '#1DE9AC' },
  arrow: { fill: '#474B56', activeFill: '#1DE9AC' },
  lasso: { border: '1px solid #55aaff', background: 'rgba(75, 160, 255, 0.1)' },
  cluster: {
    stroke: '#474B56',
    opacity: 1,
    label: { color: '#ACBAC7', stroke: '#1E2026' }
  }
};

<GraphCanvas theme={customTheme} nodes={nodes} edges={edges} />;
```

--------------------------------

### Implement Layout Algorithms

Source: https://context7.com/reaviz/reagraph/llms.txt

Reagraph supports multiple layout types including force-directed, tree, and radial. Developers can use the recommendLayout utility to select a layout or provide custom positioning logic via layoutOverrides.

```tsx
import { GraphCanvas, recommendLayout } from 'reagraph';

const suggestedLayout = recommendLayout(nodes, edges);

<GraphCanvas
  nodes={nodes}
  edges={edges}
  layoutType="custom"
  layoutOverrides={{
    getNodePosition: (id, { nodes, drags }) => {
      const idx = nodes.findIndex(n => n.id === id);
      return { x: 50 * idx, y: idx % 2 === 0 ? 0 : 100, z: 1 };
    }
  }}
/>;
```

--------------------------------

### Implement GraphCanvas Component

Source: https://github.com/reaviz/reagraph/blob/master/README.md

A basic React implementation of the GraphCanvas component. It demonstrates how to initialize the graph with a set of nodes and edges.

```tsx
import React from 'react';
import { GraphCanvas } from 'reagraph';

export default () => (
  <GraphCanvas
    nodes={[
      {
        id: 'n-1',
        label: '1'
      },
      {
        id: 'n-2',
        label: '2'
      }
    ]}
    edges={[
      {
        id: '1->2',
        source: 'n-1',
        target: 'n-2',
        label: 'Edge 1-2'
      }
    ]}
  />
);
```

--------------------------------

### Access Graph State with Zustand

Source: https://github.com/reaviz/reagraph/blob/master/CLAUDE.md

Demonstrates how to hook into the Reagraph internal state management system using Zustand. This allows components to retrieve node data and manage user selections.

```typescript
const MyComponent = () => {
  const nodes = useStore(state => state.nodes);
  const selections = useStore(state => state.selections);
  const setSelections = useStore(state => state.setSelections);
  // ...
};
```

--------------------------------

### Control Graph via Imperative Methods in React

Source: https://context7.com/reaviz/reagraph/llms.txt

Demonstrates how to use the GraphCanvasRef to programmatically trigger camera movements, export the canvas as an image, and access the underlying graphology instance. This requires a ref attached to the GraphCanvas component.

```tsx
import React, { useRef } from 'react';
import { GraphCanvas, GraphCanvasRef } from 'reagraph';

const ControlledGraph = () => {
  const graphRef = useRef<GraphCanvasRef | null>(null);
  const nodes = [/* ... */];
  const edges = [/* ... */];

  const handleCenterGraph = () => {
    graphRef.current?.centerGraph();
  };

  const handleFitNodes = (nodeIds: string[]) => {
    graphRef.current?.fitNodesInView(nodeIds, {
      fitOnlyIfNodesNotInView: true
    });
  };

  const handleZoom = () => {
    graphRef.current?.zoomIn();
  };

  const handlePan = () => {
    graphRef.current?.panLeft();
  };

  const handleExport = () => {
    const dataUrl = graphRef.current?.exportCanvas();
    const link = document.createElement('a');
    link.href = dataUrl!;
    link.download = 'graph.png';
    link.click();
  };

  const handleGetGraph = () => {
    const graph = graphRef.current?.getGraph();
    console.log('Nodes:', graph?.nodes());
    console.log('Edges:', graph?.edges());
  };

  return (
    <>
      <button onClick={handleCenterGraph}>Center</button>
      <button onClick={handleZoom}>Zoom In</button>
      <button onClick={handleExport}>Export PNG</button>
      <GraphCanvas ref={graphRef} nodes={nodes} edges={edges} />
    </>
  );
};
```

--------------------------------

### Implement Custom Context Menus in Reagraph

Source: https://context7.com/reaviz/reagraph/llms.txt

Shows how to attach custom HTML or RadialMenu components to nodes and edges. The implementation supports conditional logic for collapse/expand actions based on node state.

```tsx
import { GraphCanvas, RadialMenu } from 'reagraph';

const nodes = [/* ... */];
const edges = [/* ... */];

// Simple HTML context menu
<GraphCanvas
  nodes={nodes}
  edges={edges}
  contextMenu={({ data, onClose }) => (
    <div style={{
      background: 'white',
      padding: 10,
      borderRadius: 4,
      boxShadow: '0 2px 10px rgba(0,0,0,0.2)'
    }}>
      <h3>{data.label}</h3>
      <button onClick={() => { alert(`Action on ${data.id}`); onClose(); }}>
        Perform Action
      </button>
      <button onClick={onClose}>Close</button>
    </div>
  )}
/>

// Radial menu with collapse support
<GraphCanvas
  nodes={nodes}
  edges={edges}
  contextMenu={({ data, canCollapse, isCollapsed, onCollapse, onClose }) => (
    <RadialMenu
      onClose={onClose}
      items={[
        { label: 'Edit', onClick: () => console.log('Edit', data.id) },
        { label: 'Delete', onClick: () => console.log('Delete', data.id) },
        ...(canCollapse ? [{
          label: isCollapsed ? 'Expand' : 'Collapse',
          onClick: onCollapse
        }] : [])
      ]}
    />
  )}
/>;
```

--------------------------------

### Configure Nodes and Edges

Source: https://context7.com/reaviz/reagraph/llms.txt

Nodes and edges can be customized with specific visual properties such as colors, icons, labels, and positioning constraints. Nodes support fixed positions (fx, fy) for force layouts, while edges support interpolation, dashed lines, and arrow placement.

```tsx
import { GraphCanvas } from 'reagraph';

const nodes = [
  { id: 'server-1', label: 'Web Server', fill: '#075985', icon: '/icons/server.svg', size: 10 },
  { id: 'db-1', label: 'Database', fill: '#166534', subLabel: 'PostgreSQL' }
];

const edges = [
  {
    id: 'edge-1',
    source: '1',
    target: '2',
    label: 'HTTP',
    interpolation: 'curved',
    arrowPlacement: 'end',
    dashed: true
  }
];

<GraphCanvas nodes={nodes} edges={edges} />;
```

--------------------------------

### Implement Lasso Selection with useSelection (TypeScript)

Source: https://context7.com/reaviz/reagraph/llms.txt

Enables lasso selection functionality for the `GraphCanvas` component by integrating with the `useSelection` hook. This allows users to select multiple nodes and/or edges by drawing a selection area on the canvas.

```tsx
import React, { useRef } from 'react';
import { GraphCanvas, GraphCanvasRef, useSelection } from 'reagraph';

const LassoGraph = () => {
  const graphRef = useRef<GraphCanvasRef | null>(null);
  const nodes = [/* ... */];
  const edges = [/* ... */];

  const {
    actives,
    selections,
    onNodeClick,
    onCanvasClick,
    onLasso,
    onLassoEnd
  } = useSelection({
    ref: graphRef,
    nodes,
    edges,
    type: 'multi'
  });

  return (
    <GraphCanvas
      ref={graphRef}
      nodes={nodes}
      edges={edges}
      selections={selections}
      actives={actives}
      onNodeClick={onNodeClick}
      onCanvasClick={onCanvasClick}
      lassoType="all"  // 'none' | 'node' | 'edge' | 'all'
      onLasso={onLasso}
      onLassoEnd={onLassoEnd}
    />
  );
};
// Hold Shift and drag to create lasso selection

```

--------------------------------

### Configure Camera Interaction Modes

Source: https://context7.com/reaviz/reagraph/llms.txt

Configures various camera behaviors for the GraphCanvas, including pan, rotate, orbit, and orthographic modes. It also demonstrates how to set distance constraints for the camera.

```tsx
import { GraphCanvas } from 'reagraph';

const nodes = [/* ... */];
const edges = [/* ... */];

<GraphCanvas nodes={nodes} edges={edges} cameraMode="pan" />

<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="rotate"
  layoutType="forceDirected3d"
>
  <directionalLight position={[0, 5, -4]} intensity={1} />
</GraphCanvas>

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

<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="orthographic"
  minZoom={1}
  maxZoom={100}
/>

<GraphCanvas
  nodes={nodes}
  edges={edges}
  minDistance={100}
  maxDistance={5000}
/>;
```

--------------------------------

### Define Theme Configuration Structure

Source: https://github.com/reaviz/reagraph/blob/master/CLAUDE.md

Defines the schema for the graph theme, covering properties for canvas, nodes, edges, rings, arrows, lasso tools, and clusters.

```typescript
interface Theme {
  canvas?: { background?: ColorRepresentation; fog?: ColorRepresentation };
  node: { fill, activeFill, opacity, selectedOpacity, inactiveOpacity, label: any };
  edge: { fill, activeFill, opacity, selectedOpacity, inactiveOpacity, label: any };
  ring: { fill, activeFill };
  arrow: { fill, activeFill };
  lasso: { background, border };
  cluster?: { stroke, fill, opacity, label: any };
}
```

--------------------------------

### Enable Interactive Node Dragging

Source: https://context7.com/reaviz/reagraph/llms.txt

Enables user interaction for dragging nodes within the graph. Includes an event callback for tracking node positions and a constraint option for clustered graphs.

```tsx
import React, { useState } from 'react';
import { GraphCanvas } from 'reagraph';

const DraggableGraph = () => {
  const [nodes, setNodes] = useState([
    { id: '1', label: 'Node 1' },
    { id: '2', label: 'Node 2' }
  ]);
  const edges = [{ id: 'e1', source: '1', target: '2' }];

  return (
    <GraphCanvas
      nodes={nodes}
      edges={edges}
      draggable
      onNodeDragged={(node) => {
        console.log(`Node ${node.id} moved to:`, node.position);
      }}
      constrainDragging={false}
    />
  );
};
```

--------------------------------

### Group Nodes into Clusters with Clustering (TypeScript)

Source: https://context7.com/reaviz/reagraph/llms.txt

Demonstrates how to visually group nodes into clusters based on a specified data attribute (e.g., 'type') within the `GraphCanvas`. This feature requires the 'forceDirected2d' layout and provides callbacks for cluster interactions.

```tsx
import { GraphCanvas, lightTheme } from 'reagraph';

const nodes = [
  { id: 'n-1', label: 'Server 1', fill: '#075985', data: { type: 'server' } },
  { id: 'n-2', label: 'Server 2', fill: '#075985', data: { type: 'server' } },
  { id: 'n-3', label: 'DB 1', fill: '#166534', data: { type: 'database' } },
  { id: 'n-4', label: 'DB 2', fill: '#166534', data: { type: 'database' } },
  { id: 'n-5', label: 'Cache', fill: '#c2410c', data: { type: 'cache' } }
];

const edges = [
  { id: 'e-1', source: 'n-1', target: 'n-3' },
  { id: 'e-2', source: 'n-2', target: 'n-4' }
];

<GraphCanvas
  nodes={nodes}
  edges={edges}
  layoutType="forceDirected2d"
  clusterAttribute="type"
  draggable
  onClusterClick={(cluster) => console.log('Cluster:', cluster.label)}
  onClusterPointerOver={(cluster) => console.log('Hover:', cluster)}
/>;
```

--------------------------------

### Manage Node Visibility with Collapse and Expand in Reagraph

Source: https://context7.com/reaviz/reagraph/llms.txt

Demonstrates how to use the useCollapse hook to manage hierarchical node visibility. It tracks collapsed states and updates the GraphCanvas component to hide or show child nodes dynamically.

```tsx
import React, { useState } from 'react';
import { GraphCanvas, useCollapse, getVisibleEntities } from 'reagraph';

const CollapsibleGraph = () => {
  const [collapsed, setCollapsed] = useState<string[]>(['n-2']);

  const nodes = [
    { id: 'n-1', label: 'Root' },
    { id: 'n-2', label: 'Parent', parents: ['n-1'] },
    { id: 'n-3', label: 'Child 1', parents: ['n-2'] },
    { id: 'n-4', label: 'Child 2', parents: ['n-2'] }
  ];

  const edges = [
    { id: 'e-1', source: 'n-1', target: 'n-2' },
    { id: 'e-2', source: 'n-2', target: 'n-3' },
    { id: 'e-3', source: 'n-2', target: 'n-4' }
  ];

  const { getIsCollapsed, getExpandPathIds } = useCollapse({
    collapsedNodeIds: collapsed,
    nodes,
    edges
  });

  const toggleCollapse = (nodeId: string) => {
    if (collapsed.includes(nodeId)) {
      setCollapsed(collapsed.filter(id => id !== nodeId));
    } else {
      setCollapsed([...collapsed, nodeId]);
    }
  };

  return (
    <GraphCanvas
      nodes={nodes}
      edges={edges}
      collapsedNodeIds={collapsed}
      onNodeClick={(node, props) => {
        if (props?.canCollapse) {
          toggleCollapse(node.id);
        }
      }}
    />
  );
};
```

--------------------------------

### Render Network Graph with GraphCanvas

Source: https://context7.com/reaviz/reagraph/llms.txt

The GraphCanvas component is the primary entry point for rendering interactive network graphs. It requires arrays of nodes and edges and supports various configuration props for layout, camera modes, and event handling.

```tsx
import React from 'react';
import { GraphCanvas } from 'reagraph';

const MyGraph = () => (
  <GraphCanvas
    nodes={[
      { id: 'n-1', label: 'Node 1' },
      { id: 'n-2', label: 'Node 2' },
      { id: 'n-3', label: 'Node 3' }
    ]}
    edges={[
      { id: 'e-1', source: 'n-1', target: 'n-2', label: 'Edge 1-2' },
      { id: 'e-2', source: 'n-2', target: 'n-3', label: 'Edge 2-3' }
    ]}
    layoutType="forceDirected2d"
    cameraMode="pan"
    labelType="auto"
    onNodeClick={(node) => console.log('Clicked:', node.id)}
    onEdgeClick={(edge) => console.log('Edge clicked:', edge.id)}
  />
);
```

--------------------------------

### Create a Custom Node Renderer in Reagraph

Source: https://github.com/reaviz/reagraph/blob/master/CLAUDE.md

Defines a custom node component using React Three Fiber and React Spring for animations. The component accepts node properties and renders a 3D mesh with dynamic scaling.

```typescript
const CustomNode: FC<NodeRendererProps> = ({ color, size, opacity, animated, id }) => {
  const { scale } = useSpring({
    from: { scale: [0.00001, 0.00001, 0.00001] },
    to: { scale: [size, size, size] },
    config: { ...animationConfig, duration: animated ? undefined : 0 }
  });

  return (
    <a.mesh userData={{ id, type: 'node' }} scale={scale as any}>
      <sphereGeometry args={[1, 25, 25]} />
      <meshPhongMaterial color={color} opacity={opacity} transparent />
    </a.mesh>
  );
};
```

--------------------------------

### Apply Automatic Node Sizing

Source: https://context7.com/reaviz/reagraph/llms.txt

Configures node sizing based on specific data attributes or graph metrics like PageRank and centrality. This allows for visual representation of node importance within the graph.

```tsx
import { GraphCanvas } from 'reagraph';

const nodes = [
  { id: '1', label: 'Node 1', data: { importance: 10 } },
  { id: '2', label: 'Node 2', data: { importance: 50 } },
  { id: '3', label: 'Node 3', data: { importance: 100 } }
];
const edges = [/* ... */];

<GraphCanvas
  nodes={nodes}
  edges={edges}
  sizingType="attribute"
  sizingAttribute="importance"
  defaultNodeSize={7}
  minNodeSize={5}
  maxNodeSize={20}
/>

<GraphCanvas
  nodes={nodes}
  edges={edges}
  sizingType="pagerank"
  minNodeSize={5}
  maxNodeSize={15}
/>

<GraphCanvas
  nodes={nodes}
  edges={edges}
  sizingType="centrality"
/>;
```

--------------------------------

### Manage Node/Edge Selection with useSelection Hook (TypeScript)

Source: https://context7.com/reaviz/reagraph/llms.txt

Utilizes the `useSelection` hook to manage node and edge selection states within a `GraphCanvas`. It supports various selection types ('single', 'multi', 'multiModifier') and path selection modes, providing callbacks for selection events.

```tsx
import React, { useRef } from 'react';
import { GraphCanvas, GraphCanvasRef, useSelection } from 'reagraph';

const SelectableGraph = () => {
  const graphRef = useRef<GraphCanvasRef | null>(null);

  const nodes = [
    { id: 'n-1', label: 'Node 1' },
    { id: 'n-2', label: 'Node 2' },
    { id: 'n-3', label: 'Node 3' }
  ];

  const edges = [
    { id: 'e-1', source: 'n-1', target: 'n-2' },
    { id: 'e-2', source: 'n-2', target: 'n-3' }
  ];

  const {
    selections,
    actives,
    onNodeClick,
    onCanvasClick,
    onNodePointerOver,
    onNodePointerOut,
    clearSelections,
    addSelection,
    removeSelection,
    toggleSelection,
    selectNodePaths
  } = useSelection({
    ref: graphRef,
    nodes,
    edges,
    type: 'multi',           // 'single' | 'multi' | 'multiModifier'
    pathSelectionType: 'out', // 'direct' | 'in' | 'out' | 'all'
    pathHoverType: 'out',
    focusOnSelect: true,
    onSelection: (ids) => console.log('Selected:', ids)
  });

  return (
    <GraphCanvas
      ref={graphRef}
      nodes={nodes}
      edges={edges}
      selections={selections}
      actives={actives}
      onNodeClick={onNodeClick}
      onCanvasClick={onCanvasClick}
      onNodePointerOver={onNodePointerOver}
      onNodePointerOut={onNodePointerOut}
    />
  );
};

```

--------------------------------

### Render Custom 3D Node Geometries in Reagraph

Source: https://context7.com/reaviz/reagraph/llms.txt

Illustrates how to override default node rendering using the renderNode prop. This allows for the integration of custom React Three Fiber components or complex 3D geometries.

```tsx
import { GraphCanvas } from 'reagraph';
import { SphereWithIcon, SphereWithSvg, Sphere, Icon } from 'reagraph';

const nodes = [
  { id: '1', label: 'Node 1', icon: '/icons/server.svg' },
  { id: '2', label: 'Node 2', icon: '/icons/database.svg' }
];
const edges = [{ id: 'e1', source: '1', target: '2' }];

// Custom 3D geometry
<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="rotate"
  renderNode={({ size, color, opacity }) => (
    <group>
      <mesh>
        <torusKnotGeometry args={[size, 1.25, 50, 8]} />
        <meshBasicMaterial color={color} opacity={opacity} transparent />
      </mesh>
    </group>
  )}
/>

// Sphere with icon overlay
<GraphCanvas
  nodes={nodes}
  edges={edges}
  renderNode={({ node, size, color, opacity, active, selected }) => (
    <group>
      <Sphere
        id={node.id}
        size={size}
        opacity={0.5}
        animated={false}
        color={color}
        node={node}
        active={active}
        selected={selected}
      />
      <Icon
        id={node.id}
        image={node.icon}
        size={size}
        opacity={1}
        animated={false}
        color="white"
        node={node}
        active={active}
        selected={selected}
      />
    </group>
  )}
/>;
```

--------------------------------

### Define Graph Data Structures

Source: https://github.com/reaviz/reagraph/blob/master/CLAUDE.md

Defines the core interfaces for nodes and edges in the graph. Includes both public-facing interfaces for user input and internal interfaces for computed state.

```typescript
interface GraphNode {
  id: string;
  label?: string;
  data?: any;
  icon?: string;
  fill?: string;
  cluster?: string;
  fx?: number; fy?: number; fz?: number;
}

interface GraphEdge {
  id: string;
  source: string;
  target: string;
  label?: string;
  fill?: string;
  dashed?: boolean;
  interpolation?: 'linear' | 'curved';
  arrowPlacement?: 'none' | 'mid' | 'end';
}

interface InternalGraphNode extends GraphNode {
  position: InternalGraphPosition;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.