reagraph v4.17.3
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 i
npm start
- Browser opens to Storybook page
❤️ Contributors
Thanks to all our contributors!
3 days ago
6 days ago
11 days ago
13 days ago
21 days ago
26 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
8 months ago
8 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
9 months ago
9 months ago
8 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago