To get started with Reagraph just need to install the package and import the component.
Learn more$ npm install reagraph -S
import { GraphCanvas } from 'reagraph';
Let's define some nodes and edges. Nodes are the blocks and edges are the relationships between the blocks.
The data shapes require one property of id but you can pass label or icon to them to show some sort of indication what it represents.
Learn more<GraphCanvas
nodes={[
{ id: '1', label: 'Node 1'},
{ id: '2', label: 'Node 2' }
]}
edges={[
{ id: '1-2', source: '1', target: '2', label: 'Edge 1-2' },
{ id: '2-1', source: '2', target: '1', label: 'Edge 2-1' }
]}
/>
By default, the graph supports 2 themes: light and dark modes. You can also define your own theme using the theme interface.
You can also customize the graph by passing props to the component.
Learn more<GraphCanvas
theme={{
...lightTheme,
node: { ...lightTheme.node, color: '#000' }
}}
renderNode={({ size, color }) => (
<group>
<mesh>
<torusKnotGeometry attach="geometry" args={[size, 1.25, 50, 8]} />
<meshBasicMaterial attach="material" color={color} />
</mesh>
</group>
)}
/>