sndrew-node-editor

A React Library for creating UI Nodes

Usage no npm install needed!

<script type="module">
  import sndrewNodeEditor from 'https://cdn.skypack.dev/sndrew-node-editor';
</script>

README

sndrew-node-editor

A React Library for creating UI Nodes

npm version npm downloads

Imgur Image

Installation

Make sure you have Node installed and run:

npm install sndrew-node-editor

Usage

Check out my example here on CodeSandbox

The sndrew-node-editor library creates a React component for you to use called Editor.

import { Editor } from "sndrew-node-editor";

You need to supply Editor with an object describing your graph of nodes in the formate below.

interface INode {
  id: string;
  children: INode[]
}

Finally you need to describe what a Node should look like, by supplying Editor with a prop Node, a React Component, which will recieve a single INode data.

interface IEditorProps {
  Node: React.Component<INode>;
  nodes: INode[];
}