reagraph

WebGL Network Graphs for React

---

Reagraph is a high-performance network graph visualization built in WebGL for React.

🚀 Quick Links

• Checkout the docs and demos
• Checkout a basic demo on CodeSandbox
• Learn about updates from the changelog
• Grab the design file for the docs in Figma
• Improve the docs on Github

💎 Other Projects

• Reaflow - Open-source library for workflow and diagram graphs.
• Reablocks - Open-source component library for React based on Tailwind.
• Reaviz - Open-source library for data visualizations for React.
• Reachat - Open-source library for building LLM/Chat UIs for React.

✨ Features

• WebGL based for high performance
• Node Sizing based on attribute, page rank, centrality, custom
• Light and Dark Mode with custom theme ability
• Path finding between nodes
• Radial Context Menu
• Highlight and Selection Hook
• Dragging Nodes
• Lasso Selection
• Expand/Collapse Nodes
• Customizable Nodes
• Advanced Label Placement
• Edge Interpolation and Styling
• Clustering
• Edge Bundling
• Node Badges

with the following built in layouts:

• Force Directed 2D
• Force Directed 3D
• Circular 2D
• Tree Top Down 2D
• Tree Left Right 2D
• Tree Top Down 3D
• Tree Left Right 3D
• Radial Out 2D
• Radial Out 3D
• Hierarchical Top Down 2D
• Hierarchical Left Right 2D
• No Overlap 2D
• Force Atlas2 2D
• Concentric 2D
• Concentric 3D

📦 Usage

Install the package via NPM:

npm i reagraph --save

Install the package via Yarn:

yarn add reagraph

Import the component into your app and add some nodes and edges:

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'
      }
    ]}
  />
);

Checkout an example on CodeSandbox.

🔭 Development

If you want to run reagraph locally, its super easy!

• Clone the repo
• npm i
• npm start
• Browser opens to Storybook page

❤️ Contributors

Thanks to all our contributors!