Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unirakun/react-kgraph
A graph lib that uses SVG and webcola to render.
https://github.com/unirakun/react-kgraph
animated custom customisable graph react svg webcola
Last synced: about 1 month ago
JSON representation
A graph lib that uses SVG and webcola to render.
- Host: GitHub
- URL: https://github.com/unirakun/react-kgraph
- Owner: unirakun
- License: mit
- Created: 2020-02-13T10:37:25.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-26T15:18:09.000Z (over 4 years ago)
- Last Synced: 2024-10-13T21:28:52.792Z (2 months ago)
- Topics: animated, custom, customisable, graph, react, svg, webcola
- Language: TypeScript
- Homepage:
- Size: 2.25 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-kgraph
> A graph lib that uses SVG and webcola to render.
[](https://unirakun.github.io/react-kgraph)
[](https://www.npmjs.com/package/react-kgraph)
[](https://bundlephobia.com/[email protected])
[](https://github.com/unirakun/react-kgraph/actions?query=branch%3Amaster)
## Installation
`npm install --save react-kgraph d3@^5.15.0 d3-hierarchy@^1.1.9`
## API
There is only one component exported by this lib: `Graph`
This component takes this props:
- `nodes` which is an array of nodes
- `links` which is an array of links
- `type` the type of graph to render (either **tree** or **graph**)
- `onNodeClick` the function to call when a node is clicked
- `onLinkClick` the function to call when a link is clicked
### node
A node as this fields
| field | required | description |
| --------- | -------------------- | ------------------------------------------------------------------- |
| id | ✔ | the node id, it has to be uniq! |
| group | ✖ | the group, this is used for default colors only |
| label | ✖ | the label to print in the node |
| color | ✖ | color to set in the node background, overrides the default colors |
| children | ✖ (graph) / ✔ (tree) | only needed for tree layout, all children nodes |
| Component | ✖ | the custom React component to use to render this node in particular |
| ... | ✖ | all you other data |
### link
| field | required | description |
| --------- | -------- | ------------------------------------------------------------------- |
| source | ✔ | the index of the node that is the source of this link |
| target | ✔ | the index of the node that is the target of this link |
| label | ✖ | the label to print on the link |
| Component | ✖ | the custom React component to use to render this link in particular |
## Simple example
```tsx
import React from 'react'
import Graph from 'react-kgraph'
const nodes = [
{
id: 'jack',
label: 'Jack',
},
{
id: 'john',
label: 'Jhon',
color: '#4f9ceb',
},
{
id: 'meridith',
label: 'Meridith',
color: 'green',
},
]
const links = [
{
source: 0,
target: 1,
label: '200€',
},
{
source: 1,
target: 2,
label: '100€',
},
{
source: 1,
target: 0,
label: '150€',
},
]
const Example = () => (
Money flow
)
export default Example
```
