Skip to content

reaviz/reagraph

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
August 8, 2023 09:14
October 9, 2023 08:41
September 18, 2023 07:37
April 27, 2022 13:55
April 27, 2022 13:55
May 9, 2023 06:34
April 27, 2022 13:55
May 9, 2023 07:49
September 28, 2023 08:42
May 2, 2022 15:32
April 13, 2022 14:47
August 8, 2023 09:14
April 27, 2022 13:55
September 28, 2023 08:43
November 27, 2023 07:40
May 8, 2023 17:47
May 2, 2022 13:19
June 14, 2023 15:28


WebGL Network Graphs for React

Open Collective backers and sponsors

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

If you are looking for flow charts, checkout reaflow.

๐Ÿš€ Quick Links

โœจ 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!