reagraph

---

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
- Grab the design file for the docs in Figma
- Improve the docs on Github

💎 Other Projects

- 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.
- Reachat - Open-source library for building LLM/Chat UIs 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 and Styling
- Clustering
- Edge Bundling
- Node Badges

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 Atlas2 2D
- Concentric 2D
- Concentric 3D

📦 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:

`tsx
import React from 'react';
import { GraphCanvas } from 'reagraph';

export default () => (
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!