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:

Name	Type	Default
`color`	`ColorRepresentation` Color of the node. Handles selected/etc.
`node`	`InternalGraphNode` The internal node model.
`size`	`number` Size of the node.
`active`	`boolean` Whether the node is active or not.
`selected`	`boolean` Whether the node is selected or not.
`opacity`	`number` Opacity of the node. Mainly used for selection.
`animated`	`boolean` Animation of the node.
`id`	`string` ID of the node.

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>
    )}
  />