Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flavioschneider/graphire
An unopinionated react graph visualization library.
https://github.com/flavioschneider/graphire
graph hooks network react visualization
Last synced: 10 days ago
JSON representation
An unopinionated react graph visualization library.
- Host: GitHub
- URL: https://github.com/flavioschneider/graphire
- Owner: flavioschneider
- License: mit
- Created: 2021-10-18T14:41:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-24T10:39:05.000Z (almost 3 years ago)
- Last Synced: 2024-10-19T07:28:06.657Z (22 days ago)
- Topics: graph, hooks, network, react, visualization
- Language: JavaScript
- Homepage:
- Size: 2.37 MB
- Stars: 281
- Watchers: 6
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/graphire)
[](https://www.npmjs.com/package/graphire)
[](https://www.npmjs.com/package/graphire)
```bash
npm install graphire
```
### What is it?
Graphire is a declarative and unopinionated graph visualization library for React. It supports different layouts to visualize large dynamic networks of nodes and links in both 2D and 3D.
### How does it work?
Internally it stores the graph using a bidirectional adjacency list that allows fast insertion, deletion, and iteration. It then exposes a `Graph` wrapper and two essential hooks: `useNode` and `useLink`. Those will help you to update the node and links position in an unopinionated way.
### Unopinionated?
It means that you can choose nodes and links to be anything you like: a ``/`` (SVGs), `
`, ``, ``/instanced mesh (ThreeJS with R3F). The exposed hooks will only care for positioning. It will be up to you to decide how to display and style the nodes and links.
### Why?
Some graph/network visualization libraries like D3.js are not made to work with React, hence uncomfortable to use. Other libraries are made for React but do not decouple styling from positioning, making it hard to customize. Graphire solves that. And it's _fast_.
# [Documentation](https://github.com/flavioschneider/graphire/wiki)
# Examples
Simple example using SVGs (no layout).
Bubble example using SVGs (layout force).
Graph example in 3D with react-three-fiber (Three.js) using very efficient node instancing and segments (layout force).
Drag and drop nodes with @use-gesture and react-three-fiber (no layout).
# Basic Usage:
1. Use `Node` and `Link`components (defined in step 2 and 3) inside an svg by using the `Graph` wrapper.
```jsx
import { Graph } from 'graphire'
const MyComponent = (
return (
)
)
```
2. Build the `Node` component using the `useNode` hook.
```jsx
import { useRef } from 'react'
import { useNode } from 'graphire'
const Node = (props) => {
const { color='black', radius=5, ...rest } = props
const ref = useRef()
useNode(([cx, cy]) => {
ref.current.setAttribute('cx', cx)
ref.current.setAttribute('cy', cy)
}, rest)
return
}
```
3. Build the `Link` component using the `useLink` hook.
```jsx
import { useRef } from 'react'
import { useLink } from 'graphire'
// Link
const Link = (props) => {
const { source, target, color = 'black', ...rest } = props
const ref = useRef()
useLink(([x1, y1], [x2, y2]) => {
ref.current.setAttribute('x1', x1)
ref.current.setAttribute('y1', y1)
ref.current.setAttribute('x2', x2)
ref.current.setAttribute('y2', y2)
}, source, target, rest)
return (
)
}
```
## Goals:
Short-term:
- [ ] -
Medium-term:
- [ ] Convert to typescript (50% done)
Long-term:
- [ ] Layout circular