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
💎 Other Projects
- Unify Viz - Premium offering 850+ Figma and React professionally designed data visualization components.
- 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.
✨ 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 inpm start- Browser opens to Storybook page
❤️ Contributors
Thanks to all our contributors!
