Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaviz/reagraph
🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus.
https://github.com/reaviz/reagraph
graph graph-drawing graph-visualization javascript knowledge-graph network-graph network-visualization react webgl
Last synced: 6 days ago
JSON representation
🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus.
- Host: GitHub
- URL: https://github.com/reaviz/reagraph
- Owner: reaviz
- License: apache-2.0
- Created: 2022-04-13T18:47:26.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-30T18:35:50.000Z (10 months ago)
- Last Synced: 2024-05-01T11:31:17.479Z (10 months ago)
- Topics: graph, graph-drawing, graph-visualization, javascript, knowledge-graph, network-graph, network-visualization, react, webgl
- Language: TypeScript
- Homepage: https://reagraph.dev
- Size: 10.5 MB
- Stars: 567
- Watchers: 5
- Forks: 46
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Support: docs/Support.mdx
Awesome Lists containing this project
README
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**](https://reagraph.dev)
- Checkout a basic demo on [CodeSandbox](https://codesandbox.io/s/reagraph-example-mwh96q)
- Learn about updates from the [changelog](CHANGELOG.md)
## 💎 Other Projects
- [Reaflow](https://reaflow.dev?utm=reagraph) - Open-source library for workflow and diagram graphs.
- [Reablocks](https://reablocks.dev?utm=reagraph) - Open-source component library for React based on Tailwind.
- [Reaviz](https://reaviz.dev?utm=reagraph) - Open-source library for data visualizations for React.
- [Reachat](https://reachat.dev?utm=reagraph) - 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
- 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:
```tsx
import React from 'react';
import { GraphCanvas } from 'reagraph';
export default () => (
2',
source: 'n-1',
target: 'n-2',
label: 'Edge 1-2'
}
]}
/>
);
```
Checkout an example on [CodeSandbox](https://codesandbox.io/s/reagraph-example-mwh96q).
## 🔭 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!
