Skip to content

Latest commit

 

History

History
154 lines (126 loc) · 3.73 KB

README.md

File metadata and controls

154 lines (126 loc) · 3.73 KB

react-flow-graph

A flow graph react component library for react applications.

Install

npm install --save react-flow-graph

Usage

Demo here

  1. 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>
);
  1. 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

ChildNode - A node in the flow

  • element: (required) Any react Node
  • children: (required) Any number of <ChildNode>

License

MIT © TarzzoTech

Inspired from

The code and design reference is taken from react-organizational-chart for building the base of this library.

This is little upgraded version of the "react-organizational-chart" library with additional components.