{"id":13421957,"url":"https://github.com/joyceworks/flowchart-react","last_synced_at":"2025-03-15T10:31:34.717Z","repository":{"id":39967871,"uuid":"258222836","full_name":"joyceworks/flowchart-react","owner":"joyceworks","description":"Lightweight flowchart \u0026 flowchart designer for React.js.","archived":false,"fork":false,"pushed_at":"2025-01-11T02:05:18.000Z","size":1837,"stargazers_count":44,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-11T02:29:41.763Z","etag":null,"topics":["diagram","flowchart","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joyceworks.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-23T13:56:30.000Z","updated_at":"2025-01-11T02:05:22.000Z","dependencies_parsed_at":"2025-01-11T02:29:47.104Z","dependency_job_id":"9e3765d6-43a4-4907-a6ed-534896d9f3da","html_url":"https://github.com/joyceworks/flowchart-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joyceworks","download_url":"https://codeload.github.com/joyceworks/flowchart-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719080,"owners_count":20336591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","flowchart","reactjs"],"created_at":"2024-07-30T23:00:34.559Z","updated_at":"2025-03-15T10:31:34.156Z","avatar_url":"https://github.com/joyceworks.png","language":"TypeScript","readme":"# Flowchart React\n\n\u003e Lightweight flowchart \u0026amp; flowchart designer for React.js\n\n[![NPM](https://img.shields.io/npm/v/flowchart-react.svg)](https://www.npmjs.com/package/flowchart-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nEnglish | [中文](https://www.joyceworks.com/2022/02/26/flowchart-react-readme-cn/)\n\n\u003cimg width=\"802\" alt=\"image\" src=\"https://github.com/joyceworks/flowchart-react/assets/5696485/7ec9078b-950c-4ba1-8d85-1ea3de514fa1\"\u003e\n\n## Install\n\n```bash\nnpm install --save flowchart-react\n# or\nyarn add flowchart-react\n```\n\n## Usage\n\n```tsx\nimport React, { useState } from \"react\";\nimport Flowchart from \"flowchart-react\";\nimport { ConnectionData, NodeData } from \"flowchart-react/schema\";\n\nconst App = () =\u003e {\n  const [nodes, setNodes] = useState\u003cNodeData[]\u003e([\n    {\n      type: \"start\",\n      title: \"Start\",\n      x: 150,\n      y: 190,\n      id: 1,\n    },\n    {\n      type: \"end\",\n      title: \"End\",\n      x: 500,\n      y: 190,\n      id: 2,\n    },\n    {\n      x: 330,\n      y: 190,\n      id: 3,\n      title: \"Joyce\",\n    },\n    {\n      x: 330,\n      y: 300,\n      id: 4,\n      title: () =\u003e {\n        return \"No approver\";\n      },\n    },\n  ]);\n  const [conns, setConns] = useState\u003cConnectionData[]\u003e([\n    {\n      source: { id: 1, position: \"right\" },\n      destination: { id: 3, position: \"left\" },\n    },\n    {\n      source: { id: 3, position: \"right\" },\n      destination: { id: 2, position: \"left\" },\n    },\n    {\n      source: { id: 1, position: \"bottom\" },\n      destination: { id: 4, position: \"left\" },\n    },\n    {\n      source: { id: 4, position: \"right\" },\n      destination: { id: 2, position: \"bottom\" },\n    },\n  ]);\n\n  return (\n    \u003cFlowchart\n      onChange={(nodes, connections) =\u003e {\n        setNodes(nodes);\n        setConns(connections);\n      }}\n      style={{ width: 800, height: 600 }}\n      nodes={nodes}\n      connections={conns}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n## Demo\n\n- [CodeSandbox](https://codesandbox.io/s/stoic-borg-w626tt)\n\n## API\n\nFlowchart use nodes and connections to describe a flowchart.\n\n### Props\n\n#### nodes: `NodeData[]`\n\nArray of nodes.\n\n##### NodeData\n\n| Props              | Description         | Type                                                | Default     | Required |\n|--------------------|---------------------|:----------------------------------------------------|-------------|----------|\n| id                 | Identity            | number                                              |             | true     |\n| title              | Title of node       | string, `(node: NodeData) =\u003e string`, JSX.Element   |             | true     |\n| type               | Type of node        | `start`, `end`, `operation`, `decision`             | `operation` | false    |\n| x                  | X axis              | number                                              |             | true     |\n| y                  | Y axis              | number                                              |             | true     |\n| payload            | Custom data         | `{[key: string]: unknown}`                          |             | false    |\n| width              | Node width          | number                                              | `120`       | false    |\n| height             | Node height         | number                                              | `60`        | false    |\n| connectionPosition | Connection position | `top`, `bottom`                                     | `top`       | false    |\n| containerProps     |                     | SupportedSVGShapeProps                              |             | false    |\n| textProps          |                     | SupportedSVGTextProps                               |             | false    |\n\n##### SupportedSVGShapeProps\n\nNode shape props, only `fill` and `stroke` are supported, for more information, please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).\n\n| Props  | Description | Type   | Default | Required |\n|--------|-------------|:-------|---------|----------|\n| fill   |             | string |         | false    |\n| stroke |             | string |         | false    |\n\n##### SupportedSVGTextProps\n\nNode text props, only `fill` is supported, for more information, please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).\n\nWorks when `title` is a string.\n\n| Props  | Description | Type   | Default | Required |\n|--------|-------------|:-------|---------|----------|\n| fill   |             | string |         | false    |\n\n#### connections: `ConnectionData[]`\n\nConnections between nodes.\n\n##### ConnectionData\n\nUse `type` to describe the type of connection, `success` will draw a green line, `fail` will draw a red line.\n\n| Props       | Description                             | Type                                                       | Default   | Required |\n|-------------|-----------------------------------------|:-----------------------------------------------------------|-----------|----------|\n| type        | Type of connection                      | `success`, `fail`                                          | `success` | false    |\n| source      | Source info                             | `{id: number, position: 'left', 'right', 'top', 'bottom'}` |           | true     |\n| destination | Destination info                        | `{id: number, position: 'left', 'right', 'top', 'bottom'}` |           | true     |\n| title       | Title of connection                     | string                                                     |           | false    |\n| color       | Specify a color for the connection line | string                                                     |           | false    |\n\n#### readonly: `boolean | undefined`\n\nProp to disabled drag, connect and delete nodes.\n\n#### style: `React.CSSProperties`\n\nStyle of container.\n\n#### defaultNodeSize: `{width: number, height: number} | undefined`\n\nGlobal node size, works when `width` or `height` of node is not set.\n\nDefault: `{ width: 120, height: 60 }`.\n\n#### showToolbar: `boolean | undefined | (\"start-end\" | \"operation\" | \"decision\")[]`\n\n`false` to hide toolbar.\n\n### Events\n\n#### onChange: `(nodes: NodeData[], connections: ConnectionData[]) =\u003e void`\n\nTriggered when a node is deleted(click a node and press `delete`), moved, disconnected(click a connection and press `delete`) or connected.\n\n#### onNodeDoubleClick: `(node: NodeData) =\u003e void`\n\nTriggered when a node is double-clicked.\n\n\u003e Tip: Double-click to edit.\n\n#### onDoubleClick: `(event: React.MouseEvent\u003cSVGGElement, MouseEvent\u003e, zoom: number) =\u003e void`\n\nTriggered when the background svg is double-clicked.\n\n\u003e Tip: Double-click to create a node.\n\n```typescript\nfunction handleDoubleClick(event: React.MouseEvent\u003cSVGGElement, MouseEvent\u003e, zoom: number): void {\n  const point = {\n    x: event.nativeEvent.offsetX / zoom,\n    y: event.nativeEvent.offsetY / zoom,\n    id: +new Date(),\n  };\n  let nodeData: NodeData;\n  if (!nodes.find((item) =\u003e item.type === \"start\")) {\n    nodeData = {\n      type: \"start\",\n      title: \"Start\",\n      ...point,\n    };\n  } else if (!nodes.find((item) =\u003e item.type === \"end\")) {\n    nodeData = {\n      type: \"end\",\n      title: \"End\",\n      ...point,\n    };\n  } else {\n    nodeData = {\n      ...point,\n      title: \"New\",\n      type: \"operation\",\n    };\n  }\n  setNodes((prevState) =\u003e [...prevState, nodeData]);\n}\n```\n\n#### onConnectionDoubleClick: `(connection: ConnectionData) =\u003e void`\n\nTriggered when a connection is double-clicked.\n\n\u003e Tip: Double-click to edit connection.\n\n#### onMouseUp: `(event: React.MouseEvent\u003cSVGSVGElement\u003e, zoom: number) =\u003e void`\n\nTriggered when the mouse is up on the background svg.\n\n\u003e Tip: Drop something to here to implement node creation.\n\n#### className: `string | undefined`\n\nCustom class name of container.\n\n## License\n\nMIT © [Joyceworks](https://github.com/joyceworks)\n","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Chart"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyceworks%2Fflowchart-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoyceworks%2Fflowchart-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyceworks%2Fflowchart-react/lists"}