Nodes

Nodes

Node rendering components and custom node support. Default nodes are 3D spheres; variants add icons, SVGs, and badges. Use renderNode for fully custom rendering.

Import

import {
  Sphere,
  SphereWithIcon,
  SphereWithSvg,
  Svg,
  Badge
} from 'reagraph';

Built-in Node Types

Sphere (Default)

Basic 3D sphere. This is what renders when no renderNode is provided.

SphereWithIcon

Sphere with an image/icon overlay.

SphereWithSvg

Sphere with an SVG overlay.

Svg

Standalone SVG node (no sphere).

Badge

Overlay badge for displaying counts or status on a node.

BadgePosition: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center'

NodeRenderer Props

All built-in node types receive:

Custom Node Renderer

import { GraphCanvas, NodeRendererProps, Sphere, Badge } from 'reagraph';

const renderNode = ({ node, ...rest }: NodeRendererProps) => (
  <group>
    <Sphere {...rest} node={node} />
    {node.data?.count > 0 && (
      <Badge
        {...rest}
        node={node}
        label={String(node.data.count)}
        position="top-right"
        backgroundColor="#ff5722"
        textColor="#fff"
      />
    )}
  </group>
);

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

Per-Node Styling

Override theme defaults per node via data:

const nodes = [
  { id: '1', label: 'Normal', fill: '#7CA0AB' },
  { id: '2', label: 'Alert', fill: '#FF5722', size: 12 },
  { id: '3', label: 'With Icon', icon: '/server.svg' },
];

Node with Icon

const renderNode = ({ node, ...rest }: NodeRendererProps) => (
  <SphereWithIcon {...rest} node={node} image={node.icon} />
);

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

Notes

• Default node type is Sphere (no renderNode needed)
• renderNode receives Three.js context — return <group>, <mesh>, or reagraph symbol components
• Node fill in data overrides theme.node.fill
• Node size in data overrides the sizing strategy result
• Badge is an overlay — render it alongside a Sphere in a <group>