Reagraph

WebGL Graph Visualizations for React

WebGLReactGraph
reaviz/reagraphreagraph.devreagraph

README

🕸 reagraph


  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


- Checkout the [docs and demos](https://reagraph.dev)
- Checkout a basic demo on CodeSandbox
- Learn about updates from the changelog

✨ 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

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

📦 Usage


Install the package via NPM:

  1. ```
  2. npm i reagraph --save
  3. ```

Install the package via Yarn:

  1. ```
  2. yarn add reagraph
  3. ```

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

  1. ```tsx
  2. import React from 'react';
  3. import { GraphCanvas } from 'reagraph';

  5. export default () => (
  6.   <GraphCanvas
  7.     nodes={[
  8.       {
  9.         id: 'n-1',
  10.         label: '1'
  11.       },
  12.       {
  13.         id: 'n-2',
  14.         label: '2'
  15.       }
  16.     ]}
  17.     edges={[
  18.       {
  19.         id: '1->2',
  20.         source: 'n-1',
  21.         target: 'n-2',
  22.         label: 'Edge 1-2'
  23.       }
  24.     ]}
  25.   />
  26. );
  27. ```

Checkout an example on CodeSandbox.

🔭 Development


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

- Clone the repo
- yarn install
- yarn start
- Browser opens to Storybook page

❤️ Contributors


Thanks to all our contributors!