React-flow-graph NPM

react-flow-graph

A flow graph react component library for react applications.

Install

npm install --save react-flow-graph

Usage

Demo here

Code Node component usage

import React from "react";
import { ParentNode, ChildNode } from "react-flow-graph";

const FlowChart = () => (
  <ParentNode element={<div>Parent</div>}>
    <ChildNode element={<div>Child 1</div>}>
      <ChildNode element={<div>Grand Child 1</div>} />
      <ChildNode element={<div>Grand Child 2</div>} />
    </ChildNode>
    <ChildNode element={<div>Child 2</div>} />
  </ParentNode>
);

Inbuilt Org chart usage

import React from "react";
import { OrgChartData, OrgChart } from "react-flow-graph";

const data: OrgChartData = {
  key: 0,
  value: "CEO",
  children: [
    {
      key: 1,
      value: "Vice president 1",
      children: [
        {
          key: 4,
          value: "Sr Director 1",
        },
        {
          key: 5,
          value: "Sr Director 2",
        },
      ],
    },
    {
      key: 2,
      value: "Vice president 2",
      children: [
        {
          key: 6,
          value: "Sr Director 1",
        },
      ],
    },
    {
      key: 3,
      value: "Vice president 3",
    },
  ],
};

const BasicOrgChart = () => <OrgChart data={data} />;

Use Value as a custom component for custom designs

import React from "react";
import { OrgChartData, OrgChart } from "react-flow-graph";

const Component = () => {
  return (
    <div style={{ background: "black", color: "white" }}>Sr Director 1</div>
  );
};

const data: OrgChartData = {
  key: 0,
  value: "CEO",
  children: [
    {
      key: 1,
      value: "Vice president 1",
      children: [
        {
          key: 4,
          value: <Component />,
        },
        {
          key: 5,
          value: "Sr Director 2",
        },
      ],
    },
    {
      key: 2,
      value: "Vice president 2",
      children: [
        {
          key: 6,
          value: "Sr Director 1",
        },
      ],
    },
    {
      key: 3,
      value: "Vice president 3",
    },
  ],
};

const CustomOrgChart = () => <OrgChart data={data} />;

Components

`ParentNode` - The root of the flow

Accepts the following props:

element: (required) Any react Node
children: (required) Any number of <ChildNode>
lineHeight: (default 20px) The height of the Path as a css length
lineWidth: (default 1px) The width of the Path as a css length
lineColor: (default black) The color of the Path as a css color
lineStyle: (default solid) The line style as a css line-style
lineBorderRadius: (default 5px) The border radius of the Path as a css border-radius
nodePadding: (default 5px) The left and right padding of every <ChildNode> as a css length