flow-ui-react

flow-ui-react

A visualization react component library

Quickstart

npm i flow-ui-react

import { Tree } from "flow-ui-react";

const data = {
  name: "Bob",
  children: [
    { name: "Jane" },
    {
      name: "Cindy",
      children: [{ name: "Billy" }]
    }
  ]
};

const treeProps = {
  direction: "down",
  rootPosition: [svgWidth / 2, svgHeight / 2],
  spacing: {
    parentChild: 100,
    sibling: 20
  },
  nodeDiameter: 10,
  data
};

const App = () => (
  <div>
    <svg>{<Tree {...treeProps} />}</svg>
  </div>
);

API

Link

Node

Tree

Uses Link and Node components

Local Development

Establish link

1. Create output link

# from /flow-ui-react
yarn link

1. Create input link

# from /my-other-project
yarn link flow-ui-react

Making changes

1. Make sure you're linked

2. Build

yarn build

Publishing to npm