Popularity
1.5
Growing
Activity
6.2
-
41
2
8

Programming language: TypeScript
License: MIT License
Tags: UI Components     Chart    

Flowchart React alternatives and similar libraries

Based on the "Chart" category.
Alternatively, view flowchart-react alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Flowchart React or a related project?

Add another 'Chart' Library

README

Flowchart React

Lightweight flowchart & flowchart designer for React.js

NPM JavaScript Style Guide

English | δΈ­ζ–‡

Install

npm install --save flowchart-react
# or
yarn add flowchart-react

Usage

import React, { useState } from "react";
import Flowchart from "flowchart-react";
import { ConnectionData, NodeData } from "flowchart-react/dist/schema";

const App = () => {
  const [nodes, setNodes] = useState<NodeData[]>([
    {
      type: "start",
      title: "Start",
      x: 150,
      y: 190,
      id: 1,
    },
    {
      type: "end",
      title: "End",
      x: 500,
      y: 190,
      id: 2,
    },
    {
      x: 330,
      y: 190,
      id: 3,
      title: "Joyce",
      type: "operation",
    },
    {
      x: 330,
      y: 300,
      id: 4,
      title: () => {
        return "No approver";
      },
      type: "operation",
    },
  ]);
  const [conns, setConns] = useState<ConnectionData[]>([
    {
      source: { id: 1, position: "right" },
      destination: { id: 3, position: "left" },
      type: "success",
    },
    {
      source: { id: 3, position: "right" },
      destination: { id: 2, position: "left" },
      type: "success",
    },
    {
      source: { id: 1, position: "bottom" },
      destination: { id: 4, position: "left" },
      type: "success",
    },
    {
      source: { id: 4, position: "right" },
      destination: { id: 2, position: "bottom" },
      type: "success",
    },
  ]);

  return (
    <Flowchart
      onChange={(nodes, connections) => {
        setNodes(nodes);
        setConns(connections);
      }}
      style={{ width: 800, height: 600 }}
      nodes={nodes}
      connections={conns}
    />
  );
};

export default App;

Demo

API

Props

nodes: NodeData[]

Array of nodes.

NodeData
Props Description Type Default Required
id Identity number true
title Title of node string, (node: NodeData) => string true
type Type of node start, end, operation, decision true
x X axis number true
y Y axis number true
payload Custom data {[key: string]: unknown} false
width Node width number 120 false
height Node height number 60 false
connections: ConnectionData[]

Connections between nodes.

ConnectionData
Props Description Type Default Required
type Type of connection success, fail false
source Source info {id: number, position: 'left', 'right', 'top', 'bottom'} true
destination Destination info {id: number, position: 'left', 'right', 'top', 'bottom'} true
readonly: boolean | undefined

Prop to disabled drag, connect and delete action.

style: React.CSSProperties

Style of background svg.

defaultNodeSize: {width: number, height: number} | undefined

Default: { width: 120, height: 60 }.

showToolbar: boolean | undefined

false to hide toolbar.

Events

onChange: (nodes: NodeData[], connections: ConnectionData[]) => void

Triggered when a node is deleted(click a node and press delete), moved, disconnected(click a connection and press delete) or connected.

onNodeDoubleClick: (node: NodeData) => void

Triggered when a node is double-clicked.

Tip: Double-click to edit.

onDoubleClick: (event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number) => void

Triggered when the background svg is double-clicked.

Tip: Double-click to create a node.

function handleDoubleClick(event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number): void {
  const point = {
    x: event.nativeEvent.offsetX / zoom,
    y: event.nativeEvent.offsetY / zoom,
    id: +new Date(),
  };
  let nodeData: NodeData;
  if (!nodes.find((item) => item.type === "start")) {
    nodeData = {
      type: "start",
      title: "Start",
      ...point,
    };
  } else if (!nodes.find((item) => item.type === "end")) {
    nodeData = {
      type: "end",
      title: "End",
      ...point,
    };
  } else {
    nodeData = {
      ...point,
      title: "New",
      type: "operation",
    };
  }
  setNodes((prevState) => [...prevState, nodeData]);
}
onConnectionDoubleClick: (connection: ConnectionData) => void

Triggered when a connection is double-clicked.

Tip: Double-click to edit connection.

onMouseUp: (event: React.MouseEvent<SVGSVGElement>, zoom: number) => void

Triggered when the mouse is up on the background svg.

Tip: Drop something to here to implement node creation.

License

MIT Β© Joyceworks


*Note that all licence references and agreements mentioned in the Flowchart React README section above are relevant to that project's source code only.