https://github.com/williamluke4/naph
React Component for rendering Node Graphs.
https://github.com/williamluke4/naph
nodegraph react typescript
Last synced: 9 months ago
JSON representation
React Component for rendering Node Graphs.
- Host: GitHub
- URL: https://github.com/williamluke4/naph
- Owner: williamluke4
- License: mit
- Created: 2019-12-13T07:20:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T15:19:16.000Z (over 5 years ago)
- Last Synced: 2025-03-14T18:54:44.424Z (10 months ago)
- Topics: nodegraph, react, typescript
- Language: TypeScript
- Homepage: https://naph-4ytx8vosc.now.sh/
- Size: 4.32 MB
- Stars: 23
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Naph
## Experimental - _Use at your own peril!_
[](https://badge.fury.io/js/naph)
[](https://gitpod.io/#https://github.com/williamluke4/Naph)
=======
## Install
#### NPM:
```sh
npm install --save naph
```
## Usage
```jsx
import NaphGraph, { NaphProvider } from "naph";
const example = {
nodes: [
{
nid: 1,
title: "User",
x: 50,
y: 50,
fields: [
{ name: "id", type: "@id" },
{ name: "firstname", type: "String" },
{ name: "surname", type: "String" },
{ name: "posts", type: "Post[]" },
{ name: "comments", type: "Comment[ ]" }
]
},
{
nid: 3,
title: "Comment",
x: 500,
y: 300,
fields: [
{ name: "id", type: "@id" },
{ name: "post", type: "Post" },
{ name: "user", type: "User" },
{ name: "data", type: "String" }
]
},
{
nid: 2,
title: "Post",
x: 400,
y: 100,
fields: [
{ name: "id", type: "@id" },
{ name: "user", type: "User" },
{ name: "comments", type: "Comment[]" },
{ name: "data", type: "String" }
]
}
],
connections: [
{
from_node_id: 1,
from_field_name: "posts",
to_node_id: 2,
to_field_name: "user"
},
{
from_node_id: 1,
from_field_name: "comments",
to_node_id: 3,
to_field_name: "user"
},
{
from_node_id: 2,
from_field_name: "comments",
to_node_id: 3,
to_field_name: "post"
}
]
};
export const Naph = () => (
onNodeMove(nid, pos)}
onNodeStartMove={nid => onNodeStartMove(nid)}
onNewConnector={(n1, o, n2, i) => onNewConnector(n1, o, n2, i)}
onRemoveConnector={connector => onRemoveConnector(connector)}
onNodeSelect={nid => {
handleNodeSelect(nid);
}}
onNodeDeselect={nid => {
handleNodeDeselect(nid);
}}
/>
);
```