/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.

$3

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

Examples

Simple example using SVGs without any layout.	Bubble example using SVGs with force layout.
Graph example in 3D with react-three-fiber (Three.js) using very efficient node instancing and segments.	Graph example in 3D with react-three-fiber (Three.js) using very efficient node instancing and segments.

Basic Usage:

1. Use Node and Linkcomponents (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 { useNode } 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:

Medium-term:
- [ ] Convert to typescript (50% done)

Long-term:
- [ ] Layout circular