Custom Nodes

reagraph supports the ability to override the Node shape and pass your own custom node component.

In the GraphCanvas you can pass a callback to the renderNode function which passes the following attributes:


export interface NodeRendererProps {
  /**
   * Color of the node. Handles selected/etc.
   */
  color: ColorRepresentation;
 
  /**
   * The internal node model.
   */
  node: InternalGraphNode;
 
  /**
   * Size of the node.
   */
  size: number;
 
  /**
   * Whether the node is active or not.
   */
  active: boolean;
 
  /**
   * Opacity of the node. Mainly used for selection.
   */
  opacity: number;
 
  /**
   * Animation of the node.
   */
  animated: boolean;
 
  /**
   * ID of the node.
   */
  id: string;
}

Using react-three-fiber you can use JSX to create your own WebGL custom node like:


export const Custom3DNode = () => (
  <GraphCanvas
    nodes={simpleNodes}
    edges={simpleEdges}
    cameraMode="rotate"
    renderNode={({ size, color, opacity }) => (
      <group>
        <mesh>
          <torusKnotGeometry attach="geometry" args={[size, 1.25, 50, 8]} />
          <meshBasicMaterial
            attach="material"
            color={color}
            opacity={opacity}
            transparent
          />
        </mesh>
      </group>
    )}
  />