Skip to content

reaviz/reagraph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0e32f25 Β· Jan 13, 2025
Mar 20, 2024
Aug 8, 2023
Jul 26, 2024
Nov 22, 2024
Jan 6, 2025
Apr 27, 2022
Apr 27, 2022
Apr 28, 2024
Apr 27, 2022
May 9, 2023
Jan 13, 2025
Mar 18, 2024
Apr 13, 2022
Aug 1, 2024
Apr 27, 2022
Nov 22, 2024
Jan 13, 2025
May 8, 2023
Jan 31, 2024
Jun 14, 2023

Repository files navigation



WebGL Network Graphs for React

Open Collective backers and sponsors

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

πŸš€ Quick Links

πŸ’Ž 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
  • Clustering

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 Atlas 2 2D

πŸ“¦ 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!