shinhanbyeol / reagraph

๐Ÿ•ธ WebGL Graph Visualizations for React. Maintained by @goodcodeus.

Home Page:https://reagraph.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

๐Ÿ•ธ 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

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

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
  • yarn install
  • yarn start
  • Browser opens to Storybook page

โค๏ธ Contributors

Thanks to all our contributors!

About

๐Ÿ•ธ WebGL Graph Visualizations for React. Maintained by @goodcodeus.

https://reagraph.dev

License:Apache License 2.0


Languages

Language:TypeScript 95.5%Language:JavaScript 2.8%Language:CSS 1.0%Language:HTML 0.7%Language:Shell 0.0%